在 safari 和 FireFox 中向上滚动时出现断断续续的动画答案

【问题标题】：Choppy animation while scrolling up in safari and FireFox在 safari 和 FireFox 中向上滚动时出现断断续续的动画
【发布时间】：2018-09-24 04:06:03
【问题描述】：

我正在建立一个网站，我在其中放置了一个滚动动画，其中图标图像根据正确容器内容的偏移位置向上移动。逻辑效果很好，但动画在 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});     
}
});

有什么帮助吗？

【问题讨论】：

标签： jquery firefox safari web-frontend

【解决方案1】：

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

它有更好的性能，可以给你更流畅的结果。此外，如果您使用的是 Retina 显示器或其他高密度显示器，它也会影响性能。

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

【讨论】：

【解决方案2】：

不要为触发布局重新计算的属性设置动画。简而言之，使用transform 而不是像top left 等定位道具。检查here 以查看每个属性的工作方式。一般来说，transform 和 opacity 是唯一可以廉价动画的属性，其余的取决于确切的布局复杂性。
除非您缩放移动的元素，否则您可以使用 will-change: transform 对它们进行预优化。这是一个complicated 主题，但总的来说，它至少与使用translateZ(0) 之类的设置空白初始转换一样有帮助。
使滚动绑定passive。

【讨论】：

#2 已经尝试过，但没有成功。同样，问题仅存在于 safari 和 fireFox 中。铬工作正常。 #3 我不确定 safari 是否支持它。
#1 是客户的设计要求。我无法改变它。
如果你不能做到#1，你就无法修复它。这是问题的直接原因，所以如果使用精确的样式属性是客户的要求，他自己会破坏它。