应用错误收集

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

时间：2018-07-30 07:44:50

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

我在使用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上运行不正常。

1 个答案:

答案 0 :(得分：11)

这看起来像是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;   |
+---------------+-----------------+