Menu
I'm on Chrome 68.
Whenever I have filter: invert(xxx); on the <body>, anything positioned as fixed doesn't stick to the screen, it scrolls with everything.
Demo with 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>Demo without filter: invert(xxx);
body{
height: 8000px;
}
div{
position: fixed;
top: 0;
left: 0;
height: 100px;
width: 100px;
border: 1px solid black;
}<div></div>EDIT: Works fine on Chrome 67, but not on Chrome 68.
697
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>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.
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; |
+---------------+-----------------+
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
