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

I'm on Chrome 68.

我在使用Chrome 68。

Whenever I have filter: invert(xxx); on the <body>, anything positioned as fixed doesn't stick to the screen, it scrolls with everything.

每当我有过滤器:invert(xxx);在上,任何定位为固定的东西都不会粘在屏幕上,它会滚动所有内容。

Demo with filter: invert(xxx);

带过滤器的演示:反转(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>

Demo without filter: invert(xxx);

没有过滤器的演示:反转(xxx);

body{
  height: 8000px;
}

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

<div></div>

EDIT: Works fine on Chrome 67, but not on Chrome 68.

编辑:适用于Chrome 67,但不适用于Chrome 68。

1 个解决方案

#1

It looks like a bug on Google Chrome 68, but you can solve this using the <html> element instead of the <body> element:

它看起来像谷歌Chrome 68上的一个错误,但您可以使用元素而不是元素来解决这个问题:

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>

Note: In case only top and left is set to 0 the element doesn't stay fixed on scroll. But if you add bottom: 0; the element stay fixed again.

注意:如果只将top和left设置为0,则元素在滚动时不会保持固定。但是如果加上底部:0;元素再次保持固定。

I also compared the styles before (Chrome 67) and after (Chrome 68) the update and the following values changed on the same example (with filter):

我还比较了之前(Chrome 67)和之后(Chrome 68)的更新样式,并在同一个示例(使用过滤器)上更改了以下值:

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

#1