Login/Register
CSS Filter invert rule breaking fixed position on Chrome 68 [duplicate]
Asked Answered
Solved cssgoogle-chromecss-positioncss-filters
C

1

18

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.

Christianna answered 30/7, 2018 at 7:44 Comment(12)
Interesting bug, i found it on FireFox (61.0.1), only... – Piecedyed
I'm using Chrome, though. – Christianna
Chrome 67.0.3396.99: working perfectly... Chrome 68.0.3440.75: bug appears... – Piecedyed
I can't spot the difference between these two snippets. Both looks same(except the filter). – Signorino
It seems to be a Chrome 68 bug, I tested it on Chrome 67 and it works fine. I'm adding the tag. – Christianna
https://mcmap.net/q/741809/-css-invert-filer-in-chrome this might help you – Signorino
@Signorino It doesn't have anything to do with my issue, unfortunately. – Christianna
Oops! We'll find a better solution then, wait. – Signorino
@Signorino In the first example position:fixed doesn't work, make sure that you have Chrome 68 – Subcontraoctave
It doesn't work on firefox too @PascalGoldbach – Signorino
using filter seems to be the issue - also experiencing this with adding dropshadows via filter. filter creates a new position context for children with position: fixed at any sub-body level – Calyces
added a bug report: bugs.chromium.org/p/chromium/issues/detail?id=877015 – Calyces
N
15

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;   |
+---------------+-----------------+
Noma answered 30/7, 2018 at 8:5 Comment(6)
Adding it to the <html> seems to fix it indeed ! – Christianna
It still keeps scrolling on firefox :/ – Signorino
@Signorino - fixed but weird :D (see update) – Noma
I ain't lying bro T_T it's not working on Firefox. @SebastianBrosch – Signorino
@Signorino - possible only checked on chrome ;) – Noma
Not a bug. It just creates a new stacking context, also see here – Boldface

© 2022 - 2024 — McMap. All rights reserved.