位置：固定的作品像位置：在Firefox中使用絕對CSS濾鏡時

Question

Firefox position bug by parent with "filter"

我已閱讀上述問題，它在Firefox中使用CSS濾鏡罰款position: absolute。但使用CSS過濾器的position: fixed仍然不如預期。在Firefox position: fixed使用CSS過濾器的工作原理是position: absolute，如下圖所示：

html { 
 
    -moz-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    height: 100%; 
 
} 
 

 
img{ 
 
    position: fixed; 
 
    bottom: 10px; 
 
    right: 10px; 
 
} 
 

 
div { 
 
    margin-top: 10000px; 
 
}

<img src="https://www.google.com/images/srpr/logo3w.png"> 
 

 
<div id="b">The end.</div>

誰能解決這個問題？

Answer 1

似乎工作，如果你不應用filterhtml並將其應用於圖像。或者，如果您想將其應用於多個項目，請將其包裝到一個元素中，並將過濾器/定位應用於包裝。

body { 
 
    min-height: 500vh; 
 
} 
 

 
img { 
 
    -moz-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
}

<img src="https://www.google.com/images/srpr/logo3w.png">