Ошибка положения фона и режима наложения в Firefox

У меня есть заголовок с фоновым изображением, цвет и режим смешивания: умножение. При прокрутке я изменяю положение фона по вертикали, чтобы создать эффект параллакса. В Firefox он загружается нормально, но при прокрутке фоновое изображение расположено неправильно. Он должен начинаться с 50% до 50% и иметь увеличение у-позиции при понижении. Но в Firefox он прыгает примерно до 20%, когда я начинаю прокручивать (CSS все равно говорит 50+%, как и должно), а затем продолжает двигаться оттуда. Когда я связываюсь с фоновой позицией в инспекторе и устанавливаю ее на 0%, это выглядит так:

Кроме того, background-blend-mode:multiply также перестает работать с прокруткой, как вы можете видеть. Почему это? Firefox не нравится, когда вы меняете положение фона с помощью jquery?

код:

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

Редактировать: у меня такой же эффект параллакса на других страницах, где я не использую background-blend-mode, и на этих страницах background-position ведет себя как следует. Так... Я думаю, что режим смешивания вызывает ошибку позиционирования фона? Я не совсем понимаю.

0 ответов

Другие вопросы по тегам