CSSハック

Question

免責事項：
私はこれがthis reported bugに関連し、そしてthis other questionと非常によく似ているが、修正がそこは適用されません示唆されたと仮定します。

---

私はそれがposition: fixed; top: 0px;を持っている。すなわち、スティッキーあるdiv持っている場合。
ボディ/スクリーンの上部に付いている/付箋が付いていると思います。

親にフィルタを適用すると、本文にはposition: fixed;という参照として親要素（フィルタを追加したもの）を採用することになります（Firefoxのみ）。

例（https://jsfiddle.net/sz6xtfno/）：

（それはFirefoxでfixedあるべきとき、div.sticky変更位置に注意してください）

// just for demo purpose: 
 
const sticky = document.querySelector('.sticky'); 
 
const container = sticky.parentElement; 
 
setTimeout(() => container.classList.add('add-filter'), 1000);

html, 
 
body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    height: 100%; 
 
} 
 
.sticky { 
 
    display: block; 
 
    position: fixed; 
 
    top: 0px; 
 
} 
 
.add-filter { 
 
    -webkit-filter: sepia(10%) grayscale(60%); 
 
    -moz-filter: sepia(10%) grayscale(60%); 
 
    filter: sepia(10%) grayscale(60%); 
 
} 
 
div { 
 
    background-color: #ddf; 
 
    padding: 10px; 
 
    margin: 0px; 
 
    position: relative; 
 
}

<div> 
 
    <p>Previous element</p> 
 
</div> 
 
<div class="container"> 
 
    <p>This is the container</p> 
 
    <div class="sticky"> 
 
    <p>This is a sticky element</p> 
 
    </div> 
 
</div>

質問：
修正する方法この？私はこの問題が測位計算を混乱させるようであるため、JavaScriptなしのソリューションを探しています。

Answer 1

奇妙な動作... 具体的なケース - 可能なバグではなく - を解決するには、スティッキdivをコンテナの外に置くことができます。それをフィルタリングしたい場合は、add-filterクラスを追加するだけです。

<div> 
    <p>Previous element</p> 
</div> 
<div class="sticky add-filter"> 
    <p>This is a sticky element</p> 
</div> 
<div class="container add-filter"> 
    <p>This is the container</p> 
</div> 

このフィドルhttps://jsfiddle.net/4ba7g7ws/1/