When adding CSS "filter: invert()" to HTML tag, fixed position elements not working as they should
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: belogolovnikas, Unassigned)
Details
Attachments
(1 file)
|
(deleted),
image/png
|
Details |
Theres you see the fixed element not fixed anymore
What were you doing?
I were in the localhost(the website i building)
- Working on JS Framework for people with accessibility's problems
- I added to the HTML tag rule of invert and the fixed element not worked normaly
What happened?
the fixed element stayed in place and didn't move with the page.
What should have happened?
The fixed element should work like before i added invert rule to the HTML tag.
Anything else we should know?
I have ad-block, tab session manager and Ecosia search engine.
|
Reporter | |
Updated•5 years ago
|
|
||
Comment 1•4 years ago
|
||
Thanks, I'm moving this to the Inspector component, since it's the part affected.
|
||
Comment 2•4 years ago
|
||
Thank you for filing this bug. However I'm having trouble reproducing the problem. I tried with a page like this:
<html>
<body>
<div style="width:50px;height:50px;background:red;font-size:10% !important;border: 0px none; outline currentColor none 0px;bottom:10px;position:fixed;left:5px;filter: invert(0%);"></div>
</body>
</html>
Adding/removing the filter property doesn't change anything for me, the fixed position still seem to work.
Would you be able to provide an HTML page that shows the problem here?
|
|
Reporter | |
Comment 3•4 years ago
|
||
(In reply to Patrick Brosset <:pbro> from comment #2)
It happens when i add to <html> tag or <body> tag
|
||
Comment 4•4 years ago
|
||
Indeed, the issue occurs when these conditions are met:
- The element has
position: fixedand abottomoffset; - One of its ancestors has
filter: invert();
The element disappears.
Try this reduced test case and use DevTools or the console to add filter: invert() to the <body> element:
(paste in the address bar)
data:text/html,<style>div {width: 50px;height: 50px;background: red;bottom: 10px;position: fixed;}</style><div>
We suspect the issue may be outside DevTools, perhaps in how CSS is applied & rendered.
I will change the component accordingly. Feel free to re-assign if that's not the right one.
|
||
Comment 5•4 years ago
|
||
This was a spec change we need to make.
Description
•