CSS过滤器反转规则破坏Chrome 68上的固定位置[重复]答案

【问题标题】：CSS Filter invert rule breaking fixed position on Chrome 68 [duplicate]CSS过滤器反转规则破坏Chrome 68上的固定位置[重复]
【发布时间】：2019-01-06 10:07:31
【问题描述】：

我使用的是 Chrome 68。

每当我在<body> 上有filter: invert(xxx); 时，定位为fixed 的任何内容都不会粘在屏幕上，它会随所有内容滚动。

filter: invert(xxx);的演示

body{
  height: 8000px;
  filter: invert(0.85);
}

div{
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

&lt;div&gt;&lt;/div&gt;

没有filter: invert(xxx);的演示

body{
  height: 8000px;
}

div{
  position: fixed;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

&lt;div&gt;&lt;/div&gt;

编辑：在 Chrome 67 上运行良好，但在 Chrome 68 上不运行。

【问题讨论】：

有趣的错误，我在 FireFox (61.0.1) 上发现它，只有...
不过，我使用的是 Chrome。
Chrome 67.0.3396.99：完美运行... Chrome 68.0.3440.75：出现错误...
这似乎是 Chrome 68 的错误，我在 Chrome 67 上测试过，它工作正常。我正在添加标签。
使用filter 似乎是个问题——通过filter 添加阴影也遇到了这个问题。 filter 为具有position: fixed 在任何子主体级别的孩子创建一个新的位置上下文

标签： css google-chrome css-position css-filters

【解决方案1】：

这看起来像是 Google Chrome 68 上的一个错误，但您可以使用 <html> 元素而不是 <body> 元素来解决这个问题：

html {
  height: 8000px;
  filter: invert(0.85);
}
div {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

&lt;div&gt;&lt;/div&gt;

注意：如果只有 top 和 left 设置为 0，则元素不会在滚动时保持固定。但是，如果您添加 bottom: 0;，该元素会再次保持固定。

我还比较了更新之前 (Chrome 67) 和之后 (Chrome 68) 的样式，并在同一示例中更改了以下值（使用 filter）：

+---------------+-----------------+
| Chrome 67     | Chrome 68       |
+---------------+-----------------+
| bottom: 97px; | bottom: 7898px; |
| right: 526px; | right: 510px;   |
+---------------+-----------------+

【讨论】：

将它添加到<html> 似乎确实可以解决它！
它仍然在 firefox 上滚动：/
@Viira - 已修复但很奇怪：D（见更新）
我没有撒谎，兄弟 T_T 它不适用于 Firefox。 @SebastianBrosch
不是错误。它只是创建了一个新的stacking context，还有see here