Backdrop filter mirror edgeMode

[flackr]

WebKittens

@smfr @mattwoodrow

Title of the spec

Filter Effects: backdrop filter mirror edgeMode

URL to the spec

https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation

URL to the spec's repository

https://github.com/w3c/fxtf-drafts/

Issue Tracker URL

No response

Explainer URL

w3c/fxtf-drafts#374

TAG Design Review URL

No response

Mozilla standards-positions issue URL

mozilla/standards-positions#1051

WebKit Bugzilla URL

No response

Radar URL

No response

Description

This issue is specifically about the change from using the duplicate edge mode to the mirror edge mode. The mirror edge mode appears to closely or exactly visually match the rendering in Safari which does not implement the previously spec'd duplicate edge mode. There was a request for comment in w3c/fxtf-drafts#374 on the implementation but the TLDR is that the duplicate mirror edge mode leads to extreme flicker and overweighting the pixels along the edge whereas mirroring the blur sampling ensures that outside content does not bleed in while still providing a smooth introduction of new content to the blur.

[smfr]

@mattwoodrow

[flackr]

A good example to help show how this aligns with Safari's -webkit-backdrop-filter rendering is the https://wpt.live/css/filter-effects/backdrop-filter-edge-mirror.html wpt test. Chrome's previous stable behavior is the previously spec'd duplicate edgeMode which looks like this:

The strong borders are because the blur is treating the single pixel blue border as if it extends indefinitely outside for the blur.

Compare this to blurring the same content with -webkit-backdrop-filter in Safari:

Which looks much closer to chrome's implementation of the new mirror edgeMode:

The difference seems to be attributable to a subtle difference in the way blurs look, as can be seen by loading the wpt reference file which simulates this by mirroring the blurred content in chrome and safari where the same subtle difference can be seen:
https://wpt.live/css/filter-effects/reference/backdrop-filter-edge-mirror-ref.html