固定背景图片后，Chrome中的滚动不稳定

Question

我正在尝试创建一个视差网站。但是然后我有一个固定位置的问题。

我有几个部分，每个部分都有一个background-attachment:fixed。一position:fixed对在其上的所有部分的顶部的隐藏元素顶部的菜单栏。一个Google地图100％在其中一个区域中。

现在，问题是当我滚动带有google chrome动画的页面时，滚动不流畅，滚动时闪烁了几次。

我使用greensock scrollTo插件进行滚动，但这不是问题，因为我也使用jquery .animate()方法对其进行了测试。结果相同。

我进行了一项研究，发现chrome的固定位置存在错误或问题（有时在将隐藏元素放入其中时），有些页面建议将这两个与固定元素一起使用：

-webkit-backface-visibility:hidden; 
-webkit-transform: translateZ(0);

我将此添加到固定菜单中，它的一些震撼行为减少了，但仍然不流畅。如果将其添加到带有background-attachment:fixed元素的部分中，滚动动画将变得平滑，但不再像固定的那样起作用。

有人说chrome对大图像有问题，有人说chrome对固定位置有问题，有人说有解决方案对我不起作用：D

我上传了页面：http : //www.FarzanMohajerani.com/test/parallax 只需单击页面上的任意位置即可滚动。

我还用完全相同的代码创建了一个jsFiddle。但是我不知道为什么在jsFiddle中没有问题：http : //jsfiddle.net/Farzanmc/cRqxT/5/

如果有人可以引导我找到正确的解决方案，或者在我做错任何事情时提醒我，那将是很好的。谢谢

Answer 1

我现在在 Chrome 上遇到了同样的问题，我将原因缩小到以下组合：

1）背景：固定；2）变换：（任何变换，即使只是放置scale（1），都会立即破坏它）。

只要包含固定背景图像的元素没有任何“变换”，它就可以正常工作。但只要你添加“transform:scale(1);” 它实际上并没有进行任何真正的变换，它完全打破了固定的背景图像。您可以开始滚动，但它会消失。如果它在屏幕之外，无论您滚动多远，它都永远不会出现。

所以本质上，问题是 Chrome 目前无法处理转换元素中的固定背景图像。无论我们谈论的是哪个级别的后代或祖先。问题是，这几乎是一个重要的东西，我真的希望它尽快得到修复，因为它非常有限。你不能像忽视IE6一样忽视Chrome。

而且你不能应用“position:fixed;” 在“img”元素上，因为它将被固定到第一个“转换后”的祖先，而不是真实的屏幕，因为根据 W3C 的说法，这显然是应该如何处理的。尽管如此，一些新值会受到欢迎，一些新值可以一直打破到窗口，并将其固定到这些坐标。