5

我正在尝试创建一个视差网站。但是后来我遇到了固定定位的问题。

我有几个部分，每个部分都有一个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/

如果有人能指导我找到正确的解决方案或提醒我是否做错了什么，那就太好了。谢谢

4

3 回答 3

3

这为我解决了这个问题：

-webkit-transform: translate3d(0,0,0);

添加此规则会将元素转换为 Chrome 中的层，从而避免重新绘制。在我的独特情况下，错误是由浏览器重新绘制引起的。

于 2016-10-09T18:48:51.040 回答
1

我，目前与 Chrome 有同样的问题，我将原因缩小到以下组合：

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

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

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

而且您不能应用“位置：固定；” 在“img”元素上，因为它将被固定到第一个“转换”的祖先，而不是真实的屏幕，因为根据 W3C 的说法，这显然是它应该被处理的方式。虽然，一些新的价值会受到欢迎，一些可以一直打破到窗口，并固定到那些坐标。

于 2014-01-16T04:00:09.723 回答
1

我遇到了同样的问题并以这种方式修复它：我必须处理网站上的固定标题，并且任何时候我用鼠标滚轮滚动标题都会变得不稳定......我有一个 display:none 元素标题，一旦我删除了元素，标题就变得固定和稳定，现在无论我滚动多快，它都能很好地显示。

于 2014-10-01T04:59:27.467 回答