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

问题描述：

我使用的是Chrome 68。

I'm on Chrome 68.

只要我在过滤器上有过滤器：invert（xxx）; < body> ，任何定位为固定的都不会粘在屏幕上，它会滚动显示所有内容。

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）;

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

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

<div></div>

不带过滤器的演示：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上。

答

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

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

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; 该元素再次保持固定。

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.

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

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       |
+---------------+-----------------+
| bottom: 97px; | bottom: 7898px; |
| right: 526px; | right: 510px;   |
+---------------+-----------------+

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

相关推荐