固定背景画像とフィルタを適用したFirefoxレンダリングのバグ

Question

私はCSS filterを実験していましたが、実験はうまくいっていますが、Firefoxではうまくいきませんでした。

背景画像のセグメントにフィルタを適用したいと考えました。このアイデアは、ラッパーの背景イメージと内部要素を修正して、フィルターが特定の領域にのみ適用され、スクロールすることで移動できるという錯覚を作り出すことでした。

これは私が試したものです：

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    height: 200%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-direction: column 
 
} 
 

 
body, 
 
div { 
 
    background-image: url("https://i.imgur.com/wu7EkAX.jpg"); 
 
    background-attachment: fixed; 
 
} 
 

 
div { 
 
    filter: saturate(0%); 
 
    width: 50%; 
 
    height: 40%; 
 
}

<div></div> 
 
<div></div>

これは、FirefoxとChromeで非常によく動作します（と私は他のブラウザでも思う）ではありません。それは、それが誤っている最適化の結果であるようです。

マウスホイールでスクロールしてからクリックすると、更新されます。それ以外の場合は、少なくともスタンドアロンで実行している場合はこの状態のままです。

Answer 1

「解決策」は非常に簡単です、あなたが再レンダリングしてFirefoxを強制する、そこにこのトピックについての全体の記事がありますが、ここで私のアプローチの2つです：でCSSアニメーションで

@keyframes renderFix { 
    from { 
     outline-color: red; 
    } 

    to { 
     outline-color: blue; 
    } 
} 

html { 
    outline: 1px solid red; 
    animation: 1s infinite alternate renderFix; 
} 

いくつかのJavaScript

{ 
    let html, s = false, 
     cycle = function() { 
      html.style.outlineColor = s ? "red" : "blue" 
      s = !s; 
      window.requestAnimationFrame(cycle) 
     } 

    window.requestAnimationFrame(function() { 
     html = document.body.parentElement 
     html.style.outlineStyle = "solid"; 
     html.style.outlineWidth = "1px"; 
     cycle() 
    }) 
} 

JavaScriptが適用される修正：

{ 
 
    let html, s = false, 
 
     cycle = function() { 
 
      html.style.outlineColor = s ? "red" : "blue" 
 
      s = !s; 
 
      window.requestAnimationFrame(cycle) 
 
     } 
 

 
    window.requestAnimationFrame(function() { 
 
     html = document.body.parentElement 
 
     html.style.outlineStyle = "solid"; 
 
     html.style.outlineWidth = "1px"; 
 
     cycle() 
 
    }) 
 
}

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
    height: 200%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-direction: column 
 
} 
 

 
body, 
 
div { 
 
    background-image: url("https://i.imgur.com/wu7EkAX.jpg"); 
 
    background-attachment: fixed; 
 
} 
 

 
div { 
 
    filter: saturate(0%); 
 
    width: 50%; 
 
    height: 40%; 
 
}

<div></div> 
 
<div></div>