我正在尝试创建一个视差网站。但是后来我遇到了固定定位的问题。
我有几个部分，每个部分都有 background-attachment:fixed .
一个 position:fixed顶部的菜单栏，在所有部分的顶部都有一个隐藏元素。
谷歌地图 100% 在其中一个部分。
现在，问题是当我在谷歌浏览器中滚动带有动画的页面时，滚动并不顺畅，并且在滚动时会闪烁几次。
我使用 greensock scrollTo 插件进行滚动，但这不是问题，因为我还使用 jquery .animate() 对其进行了测试方法。结果相同。
我做了一项研究，发现 chrome 存在固定定位的错误或问题(有时当您将隐藏元素放入其中时)
一些页面建议将这两个与固定元素一起使用:
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
我将此添加到固定菜单中，并且它的一些波动行为减少了，但仍然不流畅。
如果我将其添加到带有
background-attachment:fixed 的部分中元素，滚动动画变得平滑但不再固定。有人说 chrome 对大图像有问题，有人说它有固定位置问题，还有一些人的解决方案对我不起作用:D
我上传了页面:
http://www.FarzanMohajerani.com/test/parallax
只需单击页面上的任意位置即可滚动。
我还用完全相同的代码创建了一个 jsFiddle。但我不知道为什么它在 jsFiddle 中没有问题:
http://jsfiddle.net/Farzanmc/cRqxT/5/
如果有人能指导我找到正确的解决方案或提醒我是否做错了什么，那就太好了。
谢谢
最佳答案
这为我解决了这个问题:
-webkit-transform: translate3d(0,0,0);
添加此规则会将元素转换为 Chrome 中的层，从而避免重新绘制。在我的独特情况下，错误是由浏览器重新绘制引起的。
关于google-chrome - 固定背景图像时，chrome 中的滚动不连贯，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16917120/