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

【问题标题】：CSS3 background-position animation lags on mobile devicesCSS3 背景位置动画在移动设备上滞后
【发布时间】：2015-08-10 21:45:29
【问题描述】：

我正在尝试使用 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%; }
}

(JSFiddle)

这很好用，只是它在移动设备上非常滞后（例如 Android Chrome 43.0））。我尝试了各种可能会强制浏览器使用 GPU 的技巧，但遗憾的是没有帮助。

一种解决方案是使用translateY 并复制图像，例如shown here。然而，这感觉不是很好，因为图像一开始就很大。不过，它确实运行顺利。

我正在寻找有关如何使此运行顺利进行的替代解决方案。

【问题讨论】：

标签： android css background background-position

【解决方案1】：

transform 运行流畅而background-position 运行不流畅的原因是transform 可以利用手机的硬件加速，而background-position 必须依靠浏览器软件对元素的重新渲染。即使是大图像，使用硬件加速总是更适合移动设备。

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

所以请使用transform 解决方案，并确信它是正确的。

【讨论】：

你说得对。您的回答促使我使用转换解决方案，但是我找到了一种避免重复图像的方法。非常感谢，非常感谢！

【解决方案2】：

受 OP 中的 link 启发，我找到了一种无需多次引用同一图像即可实现此目的的方法。但是，它确实要求您知道图像的高度。

一般的想法是有一个 relative 包装器隐藏所有溢出，并强制图像为其高度的 200%，并使其成为 repeat，最后为 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) }
}

(JSFiddle)

以上内容在 2015 年的 Android 手机上运行与在具有专用显卡的计算机上一样流畅。

【讨论】：