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

Question

我正在尝试使用 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。然而，这感觉不太好，因为图像一开始就很大。不过，它确实运行流畅。

我正在寻找其他解决方案来使运行顺利进行。

Answer 1

transform运行流畅而background-position运行不流畅的原因是transform可以利用phone的硬件加速，而background-position必须依赖关于浏览器软件对元素的重新渲染。即使是大图片，使用硬件加速对于移动设备来说总是更好。

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

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

Answer 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-phone 上的运行与在配备专用显卡的计算机上一样流畅。

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

CSS3 background-position animation lags on mobile devices

android

css

background

background-position