Javascript Safari：在滚动上使用css动画时，文本会抖动

在我的单页网站中，我有一些具有此属性的容器

.containers   {   
    transition: opacity 1000ms cubic-bezier(.25, .46, .45, .94), transform 1600ms cubic-bezier(.19, 1, .22, 1);
}

#page {
    position: fixed;
    overflow: scroll;
    width: 100vw;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

其中#页面是我在固定位置使用的主包装，用于防止浏览器拉/跳，并使网站感觉像一个应用程序

在我的JS中，我有一个检测滚动的函数

 $('#page').scroll(function() {
    $(".containers").each(function() {
        $(this).css('transform', 'translate3d(0, ' + (-$("#page").scrollTop()) + 'px, 0)');
    });
});

因此，每当容器中包含图像时，卷轴就像铬合金和safari上的黄油和丝绸

但是当容器包含一段文本时。它变得紧张不安

---

我知道问题可能是我的1600ms设置可能会产生冲突，但为什么只在Safari（移动iphone和桌面）中？我尝试了不同的解决方案，但到目前为止，对我帮助最大的是使用

-webkit transform:

以及

transform:

，现在感觉好多了，尤其是在移动设备上

您是否遇到过上述问题？就我个人而言，我不喜欢Safari 14.1和Safari TP 14.2，在您的示例中，我没有注意到任何抖动。我不知道是不是因为我用的是字体。