Safari中不稳定的滚动 [英] Choppy scrolling in Safari

问题描述

我的微型网站有问题.当我滚动时，它在除Safari之外的所有浏览器中都非常流畅.当我在Safari中滚动时，内容div经常跳动或移动(它应该留在原处)，并使滚动看起来不连贯.您知道什么地方可能出问题吗?

I have a problem with my micro website. When I scroll, it's nice and smooth in all browsers except Safari. When I do scroll in Safari, the content div jumps or moves frequently (it should stay in place) and makes the scrolling look choppy. Do you have any idea what could be wrong?

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

This is the website:
http://beta.dynamicdust.com

推荐答案

我看了一眼，确实看到了您提到的波涛汹涌"滚动(看得更多，它被击中或错过了-有时很流畅)这是非常动荡的).

I took a look and did see the "choppy" scrolling you mentioned (looking at it more, it was hit or miss - sometimes it was smooth, other times it was VERY choppy).

似乎您在Safari上的parallax回调存在一些性能问题(尽管如果它是Safari的某些错误实现，这也不会令我感到惊讶...)

It seems you've got some performance issues with your parallax callback on Safari (though it wouldn't surprise me if it's some buggy implementation with Safari...)

我推荐的一件事是查看Webkit的requestAnimationFrame.为了进行测试，我包装了逻辑以在raf中更新偏移量(并缓存了window.pageYOffset值)，并且最终看起来更平滑.

One thing I would recommend is taking a look at requestAnimationFrame for webkit. For a test, I wrapped the logic to update the offsets in a raf (and cached the window.pageYOffset value) and it seemed smoother on my end.

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.

To be honest, you could probably use raf for all browsers (if they support it).

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

Another trick people use when animating elements is to accelerate the layer that the element you are animating is on. There are a few ways to do this, but the easiest is to use -webkit-transition and set translateZ(0). It wouldn't hurt to add the two additional lines as well:

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

此外，我注意到您偏移的某些元素(使用style)是position: relative-就个人而言，我想说要进行动画处理的任何元素都应该是position: absolute.这样会将元素从DOM中删除，并且对其进行补偿不会导致回流到周围的元素(这可能会导致您的断断续续).

Also, I noticed that some elements you offset (using style) are position: relative - Personally, I'd say that any element that's to be animated should be position: absolute. This will remove the element from the DOM, and offsetting it won't cause reflows to surrounding elements (which may contribute to your choppiness).

编辑-我注意到的另一件事是，当您在野生动物园遇到橡皮筋时(我的猜测是负值)，就会发生震颤/怪异".您可能还需要考虑一下.

Edit - one other thing I noticed is that "choppiness/weirdness" happens when you encounter rubberbanding on safari (my guess are the negative values). That might be something you'll want to look at as well.

祝你好运！

这篇关于Safari中不稳定的滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！