在Safari中乱七八糟的滚动

问题描述 投票:10回答:3

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

这是网站: http://beta.dynamicdust.com

javascript html css
3个回答
9
投票

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

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

我建议的一件事是看看requestAnimationFrame for 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上遇到橡皮筋时会发生“不稳定/怪异”(我的猜测是负值)。这可能是你想要看的东西。

祝好运!


6
投票

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

编辑:我也将它应用于左右文本持有者div,页面看起来就像Chrome一样流畅。


4
投票

正好记下这一点,因为今天我遇到了溢出的自动元素:

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

-webkit-overflow-scrolling: touch;

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

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

© www.soinside.com 2019 - 2024. All rights reserved.