2017-05-08 11 views
0

Firefox position bug by parent with "filter"位置:位置のような固定作品:Firefoxで絶対CSSフィルターを使用して

私は上記の質問を読んでいると、それがFirefoxでCSSフィルターを使用してposition: absoluteに正常に動作します。しかし、CSSフィルターを使用しているposition: fixedはまだ期待どおりではありません。 FirefoxでCSSフィルターを使用してposition: fixedは以下のように、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>

誰もがこの問題を解決してもらえますか?

答えて

0

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">