Is there a specific set of tests under 
https://wpt.fyi/results/css/filter-effects?label=master&label=experimental&aligned&q=%2Fcss%2Ffilter-effects%2Fbackdrop-filter-
 that highlight this behavior change? I would have expected, for example, some 
set of tests to recently start passing in Chrome due to this change, which 
would already have been passing in Safari and fail in Firefox. But there a 
number of other differences in tests like backdrop-filter-edge-*.html causing 
failures such it's hard to tell what the real status is.



Or are there just too many other browser differences with backdrop-filter to 
make this kind of comparison realistic?



-- Dan

From: Robert Flack <fla...@chromium.org>
Sent: Wednesday, July 24, 2024 6:41 AM
To: blink-dev <blink-dev@chromium.org>
Subject: [blink-dev] Web-Facing Change PSA: Update CSS backdrop-filter to use 
mirror edgeMode

Contact emails
fla...@chromium.org<mailto:fla...@chromium.org>, 
michaellud...@google.com<mailto:michaellud...@google.com>


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


Summary

The backdrop-filter CSS property applies one or more filters to the "backdrop" 
of an element. The "backdrop" basically means all of the painted content that 
lies behind the element. A common filter is a blur allowing designers to 
construct "frosted glass" dialog boxes, video overlays, translucent navigation 
headers, and more. This was initially implemented the same way as a regular 
blur, but sampling beyond the edges of the element allowed colors from the 
edges to bleed in. The spec was changed to sample pixels outside the backdrop 
edges by duplicating the pixels at the edge. This however, results in extreme 
flickering of content as it enters the backdrop edge. The latest spec change 
mirrors the backdrop when sampling beyond the edge which allows for a smooth 
gradual introduction of new colors at the edges without overweighting on single 
lines of color.



Blink component
Blink>CSS<https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>


TAG review
None


TAG review status
Not applicable


Risks



Interoperability and Compatibility

The specific visual result of a blur backdrop-filter is currently quite 
different between Chrome, Firefox and Safari, as such this developers could not 
rely on any interoperable behavior today. This change visually aligns closely 
to Safari's filter - if not identical, so should bring those two in rough 
alignment. We agreed upon this new behavior in the CSSWG resolutions for the 
new edgeMode[1] and using this edgeMode for backdrop-filter[2]. [1] 
https://github.com/w3c/fxtf-drafts/issues/527 [2] 
https://github.com/w3c/fxtf-drafts/issues/374


Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1051)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/372) 
This change is visually very similar to the blur being applied in Safari which 
doesn't have the flickering issues that our current duplicate edgeMode has.

Web developers: No signals There have been many negative signals about the 
current duplicate behavior that this change resolves (all duplicated into the 
main bug): https://issues.chromium.org/issues/40040614 There is positive 
sentiment for Safari's behavior on https://issues.chromium.org/issues/40666159 
and https://issues.chromium.org/issues/40040614 which this change in behavior 
aligns with.

Other signals:


Ergonomics

There are no known ergonomic risks.



Activation

This should be an improvement to the quality of blur backdrop-filters that 
developers are already using and further allow developers to adopt them without 
worrying about the flickering edge cases of the duplicate filter. Developers 
don't need to do anything other than use the backdrop-filter property.



Security

There are no known security risks. This is replacing one sampling algorithm 
with another.



WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it 
has potentially high risk for Android WebView-based applications?

None



Debuggability

As a change to the visual blur, there is no specific debugging support.



Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, 
ChromeOS, Android, and Android WebView)?
Yes


Is this feature fully tested by 
web-platform-tests<https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?
Yes

https://wpt.fyi/results/css/filter-effects?label=master&label=experimental&aligned&q=%2Fcss%2Ffilter-effects%2Fbackdrop-filter-



Flag name on chrome://flags
chrome://flags/#backdrop-filter-mirror-edge


Finch feature name
BackdropFilterMirrorEdgeMode


Requires code in //chrome?
False


Tracking bug
https://issues.chromium.org/u/1/issues/40040614


Estimated milestones
Shipping on desktop
129
DevTrial on desktop
127
Shipping on Android
129
DevTrial on Android
127
Shipping on WebView
129



Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop 
issues. Please list open issues (e.g. links to known github issues in the 
project for the feature specification) whose resolution may introduce web 
compat/interop risk (e.g., changing to naming or structure of the API in a 
non-backward-compatible way).
None


Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5382638738341888?gate=6076747077648384

This intent message was generated by Chrome Platform 
Status<https://chromestatus.com/>.
--
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to 
blink-dev+unsubscr...@chromium.org<mailto:blink-dev+unsubscr...@chromium.org>.
To view this discussion on the web visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJh39TOb6j0EbXZG%3DJ96GZ27jYfu-k_J9cjA0Osi_aTKgoe9yQ%40mail.gmail.com<https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJh39TOb6j0EbXZG%3DJ96GZ27jYfu-k_J9cjA0Osi_aTKgoe9yQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to blink-dev+unsubscr...@chromium.org.
To view this discussion on the web visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/PH7PR00MB144910A1C6E0139DFE98A8FDC5AA2%40PH7PR00MB1449.namprd00.prod.outlook.com.

Reply via email to