1

背景画像、色、ブレンドモードのヘッダーがあります: 乗算。スクロールすると、背景の位置を垂直方向に変更して、視差効果を作成します。Firefox では正常に読み込まれますが、スクロールすると背景画像が正しく配置されません。50% 50% で開始し、ダウンスクロールで y 位置が増加するはずです。しかし、Firefox では、スクロールを開始すると約 20% にジャンプし (CSS には 50+% と表示されます)、そこから移動し続けます。インスペクタで背景の位置をいじって 0% に設定すると、次のようになります。 ここに画像の説明を入力

また、ご覧のとおり、 background-blend-mode:multiply もスクロールで動作しなくなります。どうしてこれなの？jqueryで背景の位置を変えるとFirefoxが嫌がる？

コード：

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 が正常に動作します。スー.. ブレンドモードが背景位置のバグを引き起こしていると思いますか? よくわかりません。

4

0 に答える 0