为何filter: invert(100%)会干扰position: fixed定位？

问题场景 #

原本有一个设置了position: fixed的文本，固定在视口顶部，不会和主体文本重叠。但给body添加filter: invert(100%)实现暗模式后，这个固定文本的定位参照从视口变成了body，导致和主体文本重叠，Chrome和Firefox均存在此现象。

复现代码 #

CSS #

body.darkmode {
  background-color: black;
  filter: invert(100%);
}

div {
  position: fixed;
  top: 0;
  left: 0;
}

HTML #

<div>Fixed to canvas</div>
<p>Main body text</p>
<button onclick="document.body.classList.toggle('darkmode')">Toggle dark mode</button>

原因解析 #

这是CSS规范的既定行为：当元素的filter属性值不为none时，该元素会创建一个新的包含块。对于其内部的position: fixed元素而言，固定定位的参照对象不再是视口，而是这个添加了filter的父元素。

在你的代码中，body被添加了filter: invert(100%)，因此内部的固定定位元素会以body为参照定位，而非视口，最终导致重叠问题。

解决方案 #

将filter属性应用到根元素html上即可解决。因为html是页面的根容器，即使给它添加filter，内部的position: fixed元素依然会以视口为参照定位。

修改后的代码 #

CSS

html.darkmode {
  background-color: white;
  filter: invert(100%);
}

div {
  position: fixed;
  top: 0;
  left: 0;
}

HTML

<div>Fixed to canvas</div>
<p>Main body text</p>
<button onclick="document.documentElement.classList.toggle('darkmode')">Toggle dark mode</button>

内容的提问来源于stack exchange，提问作者Heiko Theißen