css过滤中断在Firefox中的定位

Question

免责声明：

我认为这与这个报告的臭虫有关，并且非常类似于另一个问题，但建议的修复并不适用。

如果我有一个粘粘的div (它有position: fixed; top: 0px; )。

我希望它会粘在身体/屏幕的顶部。

我注意到(仅在Firefox中)，将筛选器应用于其父元素将使位置采用父元素(我添加了过滤器的元素)作为position: fixed;引用，而不是主体。

示例(https://jsfiddle.net/sz6xtfno/)：

(注意div.sticky更改的位置，当它在火狐中应该是fixed )

​

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

奇怪的行为..。为了解决特定的情况--而不是可能的bug -，您可以将粘性div放在容器之外。如果你也想过滤它，你只需要添加一个过滤器类到它。

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