在野生动物园和火狐中向上滚动时断断续续的动画

Question

我正在构建一个网站，其中我放置了一个滚动动画，其中图标图像根据正确容器内容的偏移位置向上移动。逻辑很好用，但动画在 safari 和 Firefox 中断断续续。

网址 - http://ashirvad.xyz/qbf/

代码逻辑如下所示：

$(window).scroll(function() {    
    var height = $(window).height(),
        scroll = $(window).scrollTop()
        var offsetStart = $('#cardContent').offset();      
    if (initialOffSetStartPosition.top >= (offsetStart.top -scroll - 1) ) {
        $(".nav-sticky").offset({top:offsetStart.top});     
}
});

有什么帮助吗？

Answer 1

尝试使用transform而不是定位。https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

它具有更好的性能，可能会给您带来更流畅的结果。此外，如果您使用的是视网膜显示器或其他高密度显示器，它也会影响性能。

更新：是的，我刚刚在Safari和Firefox的5K显示器上尝试过，性能很差。但是，当我把它移到标准显示器上时，性能很好。不过，我仍然说使用transform过度定位的元素来提高动画质量。

Answer 2

1. 不要对触发布局重新计算的属性进行动画处理。简而言之，使用transform而不是定位top left等道具。查看此处以了解每个属性的运作方式。通常，transform和opacity是唯一可以廉价制作动画的属性，其余的取决于确切的布局复杂性。

2. 除非您要缩放移动的元素，否则可以使用 will-change: transform 对其进行预优化。这是一个复杂的主题，但总的来说，它至少与使用类似 translateZ(0) 的东西设置空白初始转换一样有帮助。

3. 使滚动绑定被动。