CSS过滤器反转规则打破了Chrome 68上的固定位置 [英] CSS Filter invert rule breaking fixed position on 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上的固定位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!