[TextureMapper][GTK][WPE] backdrop filter rendering issues (leaking and inconsistent)

• Component: WebKitGTK
• Status: RESOLVED FIXED

[Haelwenn (lanodan) Monnier]

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.

[Adrian Perez]

Created attachment 410841 [details]
WebKitGTK wide viewport, incorrectly rendered

[Adrian Perez]

Created attachment 410842 [details]
WebKitGTK narrow viewport, correctly rendered

[Adrian Perez]

Created attachment 410843 [details]
WPE WebKit wide viewport, incorrectly rendered

[Adrian Perez]

Created attachment 410844 [details]
WPE WebKit narrow viewport, correctly rendered

[Adrian Perez]

Created attachment 410845 [details]
Chromium narrow viewport, correctly rendered

[Adrian Perez]

Created attachment 410846 [details]
Chromium, wide viewport, correctly rendered

[Adrian Perez]

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]

(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]

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]

Both issues were fixed.