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.
Created attachment 410841 [details] WebKitGTK wide viewport, incorrectly rendered
Created attachment 410842 [details] WebKitGTK narrow viewport, correctly rendered
Created attachment 410843 [details] WPE WebKit wide viewport, incorrectly rendered
Created attachment 410844 [details] WPE WebKit narrow viewport, correctly rendered
Created attachment 410845 [details] Chromium narrow viewport, correctly rendered
Created attachment 410846 [details] Chromium, wide viewport, correctly rendered
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!
(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 :)
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
Both issues were fixed.