Background-position & blend-mode bug in Firefox

Question

I have a header with a background image, color and blend-mode: multiply. On scroll I change the background position vertically to create a parallax effect. In firefox it loads fine, but on scroll the background image is positioned wrong. It's supposed to start at 50% 50% and have the y-position increase on downscroll. But in firefox it jumps to around 20% when i start scrolling (the css still says 50+% as it should) and then keeps moving from there. When I mess with the background position in the inspector and set it to 0%, it looks like this:

also, the background-blend-mode:multiply also stops working on scroll as you can see. Why is this? does firefox not like it when you change the background position with jquery?

code:

var lastst = 0;
$(window).scroll(function(){
    var st = $(window).scrollTop();
    $('.toppbild').each(function(){

        if(st <= $(this).height() + $('#header').height() && $(window).width() > 65 && st < lastst +1){
            $(this).css({
                'background-position': '50% ' + parseFloat(50+st/100*7) + '%',
            });
        }
    });
    lastst = st;
});

Edit: I have the same parallax effect on other pages where I dont use the background-blend-mode, and on those pages the background-position behaves as it should. Soo.. I guess the blend-mode is causing the background-positioning bug? I'm confused.