Question

我的微型网站存在问题。当我滚动时，除了Safari之外，它在所有浏览器中都很流畅。当我在Safari中滚动时，内容div会经常跳转或移动（它应该保持原位）并使滚动看起来不稳定。你知道什么是错的吗？

Answer 1

我看了一下，确实看到了你提到的“波涛汹涌”的滚动（看得更多，它被击中或错过 - 有时它很平滑，有时它非常不稳定）。

看起来你在Safari上parallax回调时遇到了一些性能问题（尽管如果它是Safari的一些错误实现，我也不会感到惊讶......）

我建议的一件事是看看requestAnimationFrame的webkit。对于测试，我包装逻辑以更新raf中的偏移量（并缓存window.pageYOffset值），结果看起来更顺畅。

function parallax(e) {
    window.webkitRequestAnimationFrame(function() {
        var offset = window.pageYOffset;
        a.style.top = (offset / 2) + "px";
        b.style.top = (offset / 2) + "px";
        textbox.style.top =- (offset * 0.7) + "px";
        textbox2.style.top =- (offset * 0.7) + "px";
    });
}

说实话，您可以对所有浏览器使用raf（如果他们支持的话）。

人们在制作动画元素时使用的另一个技巧是加速你动画元素所在的图层。有几种方法可以做到这一点，但最简单的方法是使用-webkit-transition并设置translateZ(0)。添加两个额外的行也没有坏处：

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

另外，我注意到你偏移的一些元素（使用style）是position: relative - 就个人而言，我要说任何要动画的元素都应该是position: absolute。这将从DOM中删除元素，并且抵消它不会导致回流到周围的元素（这可能会导致你的波动）。

编辑 - 我注意到的另一件事是当你在safari上遇到橡皮筋时会发生“不稳定/怪异”（我的猜测是负值）。这可能是你想要看的东西。

祝你好运！

Answer 2

我没有检查过我的答案与Jack的比较，但我认为问题在于Safari试图提高功效。因此，除非需要，否则启用硬件加速是犹豫不决的。人们用来强制硬件加速的常见技巧就是放置 -webkit-transform: translate3d(0, 0, 0); 进入正在移动的div的css。我尝试了内容类，它看起来好一点。您也可以尝试将其应用于其他图层。

编辑：我也将它应用到左右文本持有者div，并且页面看起来和Chrome一样流畅。

Answer 3

正好记下来，因为今天我遇到了溢出的自动元素：

解决方案是将此规则添加到滚动条显示的任何元素上：

def replace(s, old, new): ch="" i=0 newMsg=s.split() print newMsg for ch in newMsg: if ch==old: newMsg[i]=newMsg[i].replace(old, new) else: i = i +1 return ' '.join(newMsg)

更多细节可以在这里找到：

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 4

在悬停状态和活动状态上进行大量过渡的元素可能会导致渲染问题。

在我们的案例中，我们对应用于悬停的某些元素进行了阴影过渡。当用户滚动页面并滑动受影响的元素时，便触发了转换。然后，浏览器必须完成滚动时呈现过渡的艰苦工作。

在Safari中乱七八糟的滚动

4 个答案: