Android CSS3背景位置动画在移动设备上滞后

我正在尝试使用CSS3动画为背景创建滚动效果，例如：

body {
  background: url("bg.jpg") repeat-y 0 0;
  animation: animatedBackground 50s linear infinite;
}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}

（）

这很好用，除了在移动设备（如Android Chrome 43.0）上非常落后之外。我曾尝试过各种黑客手段，这些手段可能会迫使浏览器使用GPU，但遗憾的是，这并没有起到任何作用

一种解决方案是使用

translateY

并复制图像，如下图所示。但是，这感觉不太好，因为图像一开始就相当大。不过，它确实运行平稳

---

我正在寻找另一种解决方案，以使其运行平稳。

之所以

transform

运行平稳，而

background-position

运行不平稳，是因为

transform

可以利用手机的硬件加速，而

background-position

必须依赖于浏览器软件对图像的重新渲染元素。即使它是一个大的图像，使用硬件加速总是更好的移动

如果它是同一个图像，任何值得使用的浏览器都不会因为使用它两次而产生任何额外的影响，因为它在第一次拉取后会被缓存

因此，使用

转换
解决方案，并确信它是正确的解决方案。
受OP中的启发，我找到了一种方法来实现这一点，而无需多次引用同一图像。但是，它确实需要您知道图像的高度

一般的想法是使用
相对
包装器来隐藏所有溢出，并强制图像为其高度的200%，并使其
重复
，最后设置y轴动画-100%。例如：

#parallax-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#parallax-background {
  position: relative;
  width: 100%;
  height: @parallax-image-height * 2;
  background: url("/bundles/sunnerbergsimilarseries/images/tv-show-wall.jpg") repeat 0 0;
  animation: animatedBackground 50s linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes animatedBackground {
  0% { transform: translateY(0) }
  100% { transform: translateY(-@parallax-image-height) }
}

（）

上述功能在2015款Android手机上运行起来就像在配有专用图形卡的电脑上一样流畅。
你说得绝对正确。你的回答促使我使用变换解决方案，但我找到了避免重复图像的方法。非常感谢，非常感谢！