1766501 - `backdrop-filter` blur not applied at edges of viewport

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P3)

Description

[cc.glows]

Attachment: Screen Shot 2022-04-27 at 4.35.13 am.png

Steps to reproduce:

1. Visit https://rw7gmt.csb.app/

Version 101.0a1 (2022-04-26) (64-bit)

Actual results:

The blurring is not applied around the edges of the pane near the viewport

Expected results:

The blurring should be consistently applied

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Glenn Watson [:gw]]

Attachment: gecko.png

Current Firefox of this test case

Comment 3

[Glenn Watson [:gw]]

Attachment: mac.png

Current Safari on this test case

Comment 4

[Glenn Watson [:gw]]

Attachment: chrome.png

Current chrome on this test case

Comment 5

[Glenn Watson [:gw]]

Attachment: edge-blur.html

Different output in each browser due to edgeMode issues.

Comment 6

[Glenn Watson [:gw]]

Attachment: safari.png

Safari - seems to get edgeMode correct

Comment 7

[Glenn Watson [:gw]]

Attachment: gecko.png

Gecko - doesn't take edgeMode into account

Comment 8

[Glenn Watson [:gw]]

Attachment: chrome.png

Chromium - seems to get edgeMode right on one axis only?

Comment 9

[Emilio Cobos Álvarez (:emilio)]

Chrome Canary seems to have fixed this, I think. At least I don't see the rendering in comment 8. On stable I see edgeMode only on the top axis, ironically.

Comment 10

[Glenn Watson [:gw]]

Attachment: Bug 1766501 - Make backdrop-filter blurs use Duplicate for edgeMode

Comment 11

[cc.glows]

I'm not well-versed in this, but I believe edgeMode="duplicate" causes the poor visual flickering effect for things like sticky navbar panes:

• https://bugs.chromium.org/p/chromium/issues/detail?id=978031
• https://github.com/w3c/fxtf-drafts/issues/374

I think you want to use edgeMode="reflect" (like Safari)

Comment 12

[cc.glows]

The bug in Chrome shown that is fixed in Canary is: https://bugs.chromium.org/p/chromium/issues/detail?id=1313579&q=backdrop-filter&can=2

Comment 13

[Glenn Watson [:gw]]

The current specification draft says to use duplicate, so let's land this for now (as it's much better than edgeMode = None which is what it currently is, and is a very simple change). Let's then open a separate bug as a follow up add reflect mode, which is slightly more involved (but still not a huge amount of work).

Comment 14

[cc.glows]

Created it to track here: https://bugzilla.mozilla.org/show_bug.cgi?id=1768103

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d3eb72608074
Make backdrop-filter blurs use Duplicate for edgeMode r=gfx-reviewers,lsalzman

Comment 16

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/d3eb72608074

Comment 17

[Ardelean Oana, Desktop QA [:oardelean]]

I could not reproduce this issue on my end on a 2022-04-26 Nightly build on Windows 10.
Would you be so kind as to confirm the fix on the latest beta/nightly builds?
Thank you.