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

Zenoo 发表于 Dev

Zenoo

我使用的是Chrome 68。

每当我filter: invert(xxx);放在上时<body>，任何定位为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上工作不正常。

塞巴斯蒂安·布罗施（Sebastian Brosch）

它看起来像是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;元素，则保持不变。

我还比较了同一示例（带有filter）在更新之前（Chrome 67）和更新后（Chrome 68）的样式以及以下值：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。