我正在尝试创建一个视差网站。但后来我遇到了固定定位的问题。
我有几个部分，每个部分都有一个background-attachment:fixed。
顶部有一个position:fixed菜单栏，其中包含隐藏元素，位于所有部分的顶部。
谷歌地图100％与其中一个部分。
现在，问题是当我使用谷歌浏览器中的动画滚动页面时，滚动不顺畅，滚动时会闪烁几次。
我使用greensock scrollTo插件进行滚动，但这不是问题，因为我还使用jquery .animate()方法对其进行了测试。结果相同。
我做了一项研究，发现chrome有固定定位的错误或问题（有时当你把隐藏元素放入其中时） 有些页面建议将这两个与固定元素一起使用：
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
我将它添加到固定菜单中，它的一些不稳定行为减少了，但仍然不顺利。
如果我将此添加到具有background-attachment:fixed元素的部分，则滚动动画会变得平滑，但不会再作为修复。
有些人说铬有大图像的问题，有人说它有固定位置的问题，有些人有一个对我不起作用的解决方案：D
我上传了这个页面： http://www.FarzanMohajerani.com/test/parallax 只需点击页面上的任意位置即可滚动。
我还用完全相同的代码创建了一个jsFiddle。但我不知道为什么它在jsFiddle中没有问题： http://jsfiddle.net/Farzanmc/cRqxT/5/
如果有人能指导我找到正确的解决方案，或者如果我做错了什么，那就太棒了。 感谢
答案 0 :(得分：2)
这解决了我的问题：
-webkit-transform: translate3d(0,0,0);
添加此规则会将元素转换为Chrome中的图层，从而避免重新绘制。在我独特的情况下，错误是由浏览器重新绘制引起的。
答案 1 :(得分：1)
我'，目前Chrome遇到了同样的问题，我将原因缩小到以下组合：
1）背景：固定; 2）变换:(任何变换，即使只是放置比例（1），也会立即破坏它。）
只要包含固定背景图像的元素上没有任何“转换”，它就可以正常工作。但是只要你添加“transform：scale（1）;”它实际上并没有进行任何真正的转换，它完全打破了固定的背景图像。你可以开始滚动，但它会消失。如果它在屏幕之外，它将永远不会出现，无论你滚动多远。
基本上，问题是Chrome目前无法处理转换后元素中的固定背景图像。无论我们谈论的是哪个级别的后代或祖先。 问题是，这几乎是一个必不可少的东西，我真的希望它尽快修复，因为它是非常有限的。你不能忽视Chrome，就好像它是IE6一样。
你不能申请“职位：固定;”根据W3C的说法，在一个“img”元素上，因为它将被固定到第一个“变形”的祖先，而不是真正的屏幕，因为它显然是应该如何对待它。虽然，一些新的价值会受到欢迎，但有些可以一直打破到窗口，并固定到那些坐标。
答案 2 :(得分：1)
我跑到同一个问题并以这种方式修复： 我不得不处理网站上的固定标题，随时我会用鼠标滚轮滚动标题会变得不稳定....我有一个显示：标题中没有元素，一旦我删除元素，标题就变得固定并且稳定，现在无论我滚动多快都显示得很好。