Translate3d() scroll animation issues in Firefox

Question

I have a jumbotron with a large background fixed image (it's blurred) that I animate on scroll with translate3d. In Safari,Chrome its very smooth but in Firefox its choppy and well looks a mess. Are there any workarounds?

Animation code

function parallaxFade() {
    scrollPos = $(this).scrollTop();
    
    $('.banner_bg').css({
        
              
   '-webkit-transform': "translate3d(0," + scrollPos * -1.10 + "px, 0)",
   '-moz-transform': "translate3d(0," + scrollPos * -1.10 + "px, 0)",
   '-ms-transform': "translate3d(0," + scrollPos * -1.10 + "px, 0)",
   
        'transform': "translate3d(0," + scrollPos * -1.10 + "px, 0)",

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

Please add HTML and CSS code as well. We need to have a working example — yunzen, Aug 25 '20 at 06:47
Have you tried `MozTransform` instead of `-moz-transform`? See https://stackoverflow.com/a/14585866/476951 — yunzen, Aug 25 '20 at 07:05
@yunzen MozTransform and the others listed did improve i slightly but its still very clunky and not smooth. Firefox gives this This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; — , Aug 25 '20 at 07:58

Translate3d() scroll animation issues in Firefox

0 Answers0