CSS 过滤器反转规则打破 Chrome 68 上的固定位置

Question

我在 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;
}

<div></div>

演示没有 filter: invert(xxx);

body{
  height: 8000px;
}

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

<div></div>

编辑：在 Chrome 67 上运行正常，但在 Chrome 68 上运行不正常。

Answer 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;
}

<div></div>

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

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

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

CSS 过滤器反转规则打破 Chrome 68 上的固定位置

CSS Filter invert rule breaking fixed position on Chrome 68

css

google-chrome

css-position

css-filters