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