移动端的 TranslateZ 性能问题

【问题标题】：TranslateZ performances issue in mobile移动端的 TranslateZ 性能问题
【发布时间】：2023-03-31 04:51:01
【问题描述】：

我试图实现这个http://codepen.io/keithclark/pen/JycFw，但在使用移动设备的 chrome 中经历了严重的轻弹和滞后。

#slide1:before {
  background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
  transform: translateZ(-1px) scale(2);
  z-index:-1;
}

经过研究，我尝试使用变换 3d、背面、透视等，但仍然体验到滞后的滚动体验。

【问题讨论】：

标签： html css mobile

【解决方案1】：

TransformZ 必然会落后于设备，因为它会强制设备将其渲染为 3d。我不知道如何解决这个问题，但这里有一些用 Jquery 和 CSS 制作的替代视差效果：

http://andyshora.com/parallax.html

http://www.devfloat.com/jquery-parallax-scrolling-tutorials/

希望这些对你有帮助！

【讨论】：