filter: invert() is not always applied correctly to the background color of the html element
Categories
(Core :: Web Painting, defect, P3)
Tracking
()
| Webcompat Priority | P1 |
| Tracking | Status | |
|---|---|---|
| firefox100 | --- | affected |
People
(Reporter: oleg-derevenetz, Unassigned)
References
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Steps to reproduce:
<!DOCTYPE html>
<html style="width: 100%; height: 100%; margin: 0; padding: 0; color: #000; background: #f00; filter: invert(1);">
<head>
<title>Test</title>
</head>
<body style="min-width: 100%; min-height: 100%; margin: 0; padding: 0; color: #000; background: #fff;">
<p style="margin: 20px auto;">Text</p>
</body>
</html>
Actual results:
With Firefox, background color of upper margin space is not inverted (remains red).
Expected results:
With Chromium-based browsers, background color of upper margin space is inverted as expected (becomes cyan).
|
||
Updated•4 years ago
|
|
||
Comment 1•4 years ago
|
||
|
|
||
Comment 2•4 years ago
|
||
This is a long-standing issue, dates back to at least 2017-01-01. Occurs with either webrender enabled or disabled.
You can see in the display list dump that the Filter is a child of the red CanvasBackgroundColor, so I guess this is an issue in display list building.
Miko, Matt, any ideas?
|
||
Comment 3•4 years ago
|
||
I suspect this is just bug 1423746.
|
||
Comment 4•4 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
I suspect this is just bug 1423746.
Indeed, I think it is too.
|
||
Updated•4 years ago
|
I found this bug in the wild and posted a question about it on stackoverflow.com and then discovered this bug report.
I noticed that on Chrome it actually behaves differently whether the page is in an iframe or not, so I think that's also a Chrome bug.
Here is my example:
https://stackoverflow.com/questions/67115220/why-does-filter-render-differently-in-different-browsers-on-the-html-and-body-ta
|
|
||
Comment 6•3 years ago
|
||
[Tracking Requested - why for this release]:
Probably this should be a WebCompat Priority 1.
It affects Google Search -> Shopping as seen in
https://github.com/webcompat/web-bugs/issues/95222
|
|
||
Updated•3 years ago
|
|
||
Updated•3 years ago
|
Description
•