在Safari中乱七八糟的滚动

Question

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

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

Answer 1

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

看起来你parallax在Safari 上的回调有一些性能问题(虽然如果它是Safari的一些错误实现,我不会感到惊讶...)

我建议的一件事是看看requestAnimationFramewebkit.对于测试,我包装了逻辑来更新a中的偏移量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); 将css放入正在移动的div中.我尝试了内容类,它看起来好一点.您也可以尝试将其应用于其他图层.

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

Answer 3

只是记下这个，正如我今天用一个溢出的auto元素遇到的那样：

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

-webkit-overflow-scrolling: touch;

可以在这里找到更多详细信息：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling