RESOLVED FIXED 217476
[TextureMapper][GTK][WPE] backdrop filter rendering issues (leaking and inconsistent)
https://bugs.webkit.org/show_bug.cgi?id=217476
Summary [TextureMapper][GTK][WPE] backdrop filter rendering issues (leaking and incon...
Haelwenn (lanodan) Monnier
Reported 2020-10-08 07:27:54 PDT
On <https://hacktivis.me/tmp/webkit-backdrop-filter-header.xhtml> (page that I created to show a bug that I noticed while tweaking a frontend) you have the box-shadow creating a blur, while this behaviour isn't the one you get in chromium or firefox. You can also notice that the text on the top edge is less blurred out as it becomes slightly legible. Which is also quite noticeable on <https://webkit.org/demos/backdrop-filter/> as I can distinguish the window on the houses while for the rest you can't even guess that they are houses. On <https://misskey.io/@syuilo> you can see that about 1/4 of the page is blurred out while it should only apply to under the navigation header.
Attachments
WebKitGTK wide viewport, incorrectly rendered (606.25 KB, image/png)
2020-10-08 08:22 PDT, Adrian Perez
no flags
WebKitGTK narrow viewport, correctly rendered (212.26 KB, image/png)
2020-10-08 08:23 PDT, Adrian Perez
no flags
WPE WebKit wide viewport, incorrectly rendered (308.70 KB, image/png)
2020-10-08 08:23 PDT, Adrian Perez
no flags
WPE WebKit narrow viewport, correctly rendered (212.26 KB, image/png)
2020-10-08 08:24 PDT, Adrian Perez
no flags
Chromium narrow viewport, correctly rendered (430.67 KB, image/png)
2020-10-08 08:26 PDT, Adrian Perez
no flags
Chromium, wide viewport, correctly rendered (630.38 KB, image/png)
2020-10-08 08:26 PDT, Adrian Perez
no flags
Adrian Perez
Comment 1 2020-10-08 08:22:56 PDT
Created attachment 410841 [details] WebKitGTK wide viewport, incorrectly rendered
Adrian Perez
Comment 2 2020-10-08 08:23:13 PDT
Created attachment 410842 [details] WebKitGTK narrow viewport, correctly rendered
Adrian Perez
Comment 3 2020-10-08 08:23:52 PDT
Created attachment 410843 [details] WPE WebKit wide viewport, incorrectly rendered
Adrian Perez
Comment 4 2020-10-08 08:24:12 PDT
Created attachment 410844 [details] WPE WebKit narrow viewport, correctly rendered
Adrian Perez
Comment 5 2020-10-08 08:26:39 PDT
Created attachment 410845 [details] Chromium narrow viewport, correctly rendered
Adrian Perez
Comment 6 2020-10-08 08:26:55 PDT
Created attachment 410846 [details] Chromium, wide viewport, correctly rendered
Adrian Perez
Comment 7 2020-10-08 08:31:04 PDT
I have attached some screenshots which demonstrate the issue. It can be reproduced with WPE WebKit as well (which makes sense because it shares most of the code path for rendering filter effects), so I am adding the “[WPE]” tag. The problem can be reproduced in “trunk” as well, so I have removed the “[Stable]” tag. Interestingly, using a narrower viewport does not trigger the issue, so this might be related to some CSS rule being slightly different (through a media query) when the viewport is wider than a certain amount, and that is triggering the problem. Thanks for reporting this!
Adrian Perez
Comment 8 2020-10-08 08:34:46 PDT
(In reply to Haelwenn (lanodan) Monnier from comment #0) > On <https://hacktivis.me/tmp/webkit-backdrop-filter-header.xhtml> (page that > I created to show a bug that I noticed while tweaking a frontend) you have > the box-shadow creating a blur, while this behaviour isn't the one you get > in chromium or firefox. You can also notice that the text on the top edge is > less blurred out as it becomes slightly legible. This test case is good to demonstrate the issue, because it always triggers a wrong rendering, regardless of the width of the viewport. Thanks for sharing it :)
Fujii Hironori
Comment 9 2020-11-10 20:36:45 PST
I think there are two issues. Bug 218785 – [TextureMapper] blur backdrop-filter makes box-shadow blurry Bug 218645 – [TextureMapper] The edges of blur backdrop-filter look gradient tranparent
Fujii Hironori
Comment 10 2020-11-16 19:35:34 PST
Both issues were fixed.
Note You need to log in before you can comment on or make changes to this bug.