我正在尝试实现这个 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;
}
经过研究，我尝试使用 transform 3d、backface、perspective 等，但仍然遇到滞后的滚动体验。
最佳答案
TransformZ 必然会滞后于设备，因为它强制设备将其呈现为 3d 效果。我不知道如何解决这个问题，但这里有一些用 Jquery 和 CSS 制作的替代视差效果:
http://andyshora.com/parallax.html
http://www.devfloat.com/jquery-parallax-scrolling-tutorials/
希望这些对你有帮助!
关于html - 移动设备中的 TranslateZ 性能问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27810445/