CSS Filter 反转规则破坏了 Chrome 68 上的固定位置

标签 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 上运行不正常。

最佳答案

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

注意:以防万一 topleft设置为 0 元素不会固定在滚动条上。但是如果你加上bottom: 0;元素再次保持固定。


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

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

关于CSS Filter 反转规则破坏了 Chrome 68 上的固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51589185/

相关文章:

html - 显示 : inline-block 内的 block 级元素

css - 在不更改unicode的情况下将图标添加到icomoon字体

css - Owl Carousel 在末端创造了额外的空间

google-chrome - Nginx 反向代理 405 PUT Chrome

css - 极其基本的 HTML 格式

html - 如何让页脚贴在底部

javascript - 我如何知道哪些事件绑定(bind)到 DOM 元素?

javascript - 对 cors 和 fetch 以及何时发出选项请求感到非常困惑

html - 如何在页面中间居中放置 3 个 div

internet-explorer-10 - 在父元素中滚动后相对位置消失的 IE 10 元素