WebKit
Backdrop filter mirror edgeMode
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
https://github.com/w3c/fxtf-drafts/issues/374
TAG Design Review URL
No response
Mozilla standards-positions issue URL
https://github.com/mozilla/standards-positions/issues/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 https://github.com/w3c/fxtf-drafts/issues/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.
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