Text is painted unfiltered on top of the backdrop filter
Categories
(Core :: Graphics: WebRender, defect)
Tracking
()
People
(Reporter: emilio, Unassigned)
Details
Attachments
(3 files)
From bug 1178765 comment 75:
Playing with the JSBin example in comment #0, I noticed that backdrop-filter with a blur filter behaves oddly with text. Text behind an element with backdrop-filter: blur(3px) looks as if it has a text shadow (sharp text on top of a blurry shadow) instead of just being blurred. In Chromium it looks as expected. https://jsbin.com/toyubawoka/edit?html,css,output demonstrates the issue.
Comment 1•5 years ago
|
||
Comment 2•5 years ago
|
||
Screenshots showing the comparison between Firefox and Chromium
Comment 3•5 years ago
|
||
I also noticed that when using the Firefox built-in screenshot tool, it doesn't apply backdrop-filter (presumably that's using the non-Webrender code?)
Comment 4•5 years ago
|
||
This is bug 1573973. A backdrop root it formed at the iframe boundary and iframe by default the background is transparent. You can fix this demo by specifying the background color as white. Chrome doesn’t form a backdrop root at the iframe boundary, but the spec currently states that it should.
This does create somewhat surprising behavior on sites like jsbin and codepen because they use iframes, I’ll open a spec bug to get some more discussion about whether or not iframes should form a backdrop root.
Reporter | ||
Comment 5•5 years ago
|
||
Thanks, I see. I think our behavior makes sense per the spec. Probably assuming white or what not is slightly better? But not forming a backdrop root in iframes seems like a can of worms security wise... Since content behind the iframe would leak under it, right?
Comment 6•5 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)
But not forming a backdrop root in iframes seems like a can of worms security wise... Since content behind the iframe would leak under it, right?
You can already apply filter:
to a cross-origin iframe - wouldn't that be the same thing?
Description
•