Jquery 在safari和FireFox中向上滚动时，会出现断断续续的动画

我正在建立一个网站，在那里我放置了一个滚动动画，其中图标图像根据右容器内容的偏移位置向上移动。逻辑工作得很好，但在safari和Firefox中动画是不稳定的

URL-

代码逻辑如下所示：

$(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});     
}
});

---

有什么帮助吗？

试着用

变换来代替定位。

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

更新：是的，我刚刚在Safari和Firefox的5K显示器上试用过，性能很差。但是，当我把它移到一个标准显示器上时，性能还不错。不过，我还是说使用
transform
over-positioned元素来提高动画质量

不要设置触发布局重新计算的特性的动画。简而言之，使用
transform
而不是像
top
left
等定位道具。检查每个属性的工作方式。一般来说，
transform
和
opacity
是唯一可以廉价设置动画的属性，其余的取决于精确的布局复杂性

除非要缩放移动的元素，否则可以使用
will change:transform
对其进行预优化。这是一个主题，但一般来说，它至少有助于设置一个空白的初始转换，例如
translateZ（0）

把卷轴装订起来

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