WebKit / standards-positions

WebKit's positions on emerging web specifications
https://webkit.org/standards-positions/
254 stars 22 forks source link

Backdrop filter mirror edgeMode #372

Open flackr opened 4 months ago

flackr commented 4 months ago

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.

smfr commented 4 months ago

@mattwoodrow

flackr commented 4 months ago

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:

Screenshot 2024-07-08 at 2 16 13 PM

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:

Screenshot 2024-07-08 at 2 17 33 PM

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

Screenshot 2024-07-08 at 2 16 59 PM

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