如何用CSS filter实现暗黑模式且不破坏fixed元素定位？

问题根因 #

该跨浏览器定位差异来自CSS规范的实现差异：当<html>或<body>标签设置了filter属性时，会创建新的层叠上下文，原本基于视口定位的fixed元素会将这个加了filter的根元素作为新的包含块。Firefox对该规范的实现比Chrome更严格，因此会出现定位偏移。

方案1：无需修改DOM，快速兼容 #

仅调整现有CSS即可，修改后在Chrome、Firefox下表现一致：

body, html {
  padding: 0;
  margin: 0;
  background: white;
  height: 100%;
}

html {
  filter: invert(1);
  /* 新增两行，让html元素和视口大小完全一致，作为滚动容器 */
  height: 100vh;
  overflow: auto;
}

body {
  padding-bottom: 300px;
  overflow: visible;
}

.container {
  position: fixed;
  left: 50px;
  bottom: 50px;
  background: green;
  height: 100px;
  width: 100px;
}

方案2：新增全局包裹层，长期维护更稳定 #

如果后续需要叠加更多色彩滤镜效果，更推荐把所有页面内容放入独立的全局包裹容器，将filter加在该容器上，彻底规避根元素层叠上下文带来的兼容问题：

1. 调整HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./darkmode.css">
</head>
<body>
    <div class="global-wrapper">
        <div class="container"></div>
        <!-- 所有页面内容都放在该容器内 -->
    </div>
</body>
</html>

2. 对应CSS代码

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #000;
}

.global-wrapper {
  min-height: 100vh;
  width: 100%;
  filter: invert(1);
  background: #fff;
  padding-bottom: 300px;
  box-sizing: border-box;
}

.container {
  position: fixed;
  left: 50px;
  bottom: 50px;
  background: green;
  height: 100px;
  width: 100px;
}

该方案后续可直接叠加hue-rotate()、contrast()等其他色彩滤镜，不会出现定位异常。

内容的提问来源于stack exchange，提问作者mrkshx