Firefox中的Translate3d滚动动画问题

如何解决Firefox中的Translate3d滚动动画问题

我有一个带有大背景固定图像（模糊）的巨型飞船，我使用了translate3d对其进行了动画处理。在Safari中，Chrome浏览器非常流畅，但在Firefox中则显得比较杂乱，看上去一团糟。有什么解决方法吗？

动画代码

function parallaxFade() {
    scrollPos = $(this).scrollTop();
    
    $('.banner_bg').css({
        
              
   '-webkit-transform': "translate3d(0," + scrollPos * -1.10 + "px,0)",'-moz-transform': "translate3d(0,'-ms-transform': "translate3d(0,'transform': "translate3d(0,'opacity': 1-(scrollPos/500)
        
    });
    $('.banner_content').css({
         transform: "translate3d(0," + scrollPos * +0.25 + "px,'opacity': 1-(scrollPos/350)
    });
}
$(document).ready(function(){
    $(window).scroll(function() {
        parallaxFade();
    });
});