[css-view-transitions-1] Animate backdrop-filter for named elements

[khushalsagar]

View Transition currently automatically animates an elements size/transform. backdrop-filter should probably also be in this list. Its a property of how the element renders where its embedded, not the element's content itself. Same discussion as mix-blend-mode: #8962.

With mix-blend-mode we don't set up an animation because it can't be interpolated but backdrop-filter can.

Here's an example: https://codepen.io/LukyVj/pen/MWZovLb. The following bit of CSS fixes the issue, which can be done automagically by the browser.

nav {
  view-transition-name: nav;
}

::view-transition-group(nav) {
  backdrop-filter: blur(3px);
}

[vmpstr]

Since backdrop-filter can reference a url value, do we need to think if that can cause weird effects in cross-document navigations? Ie, the referenced url is serialized as... a string? and when parsed that refers to a different resource in the new document

[khushalsagar]

if that can cause weird effects in cross-document navigations?

Possibly. We'll be fetching any resource (like an SVG url) in the new Document so the author will have to be careful that the path is still valid. The alternate would be to cache and transfer the fetched resource itself but that would be an issue if the Documents have different COOP policies. So serializing the url is the safer thing to do.

[css-meeting-bot]

The CSS Working Group just discussed [css-view-transitions-1] Animate backdrop-filter for named elements, and agreed to the following:

• RESOLVED: animate backdrop-filter for view transitions similar to transform/size

The full IRC log of that discussion

<jensimmons> I just wrote a Mastodon question to get a bit feedback:https://front-end.social/@jensimmons/111138016628140950
<emeyer> khush: There was a case where the author has put a backdrop filter on a transition with a name
<emeyer> …This ran into the mix blend problem
<emeyer> …During view transitions, the property gets dropped on the floor
<emeyer> …It doesn’t get applied
<emeyer> …The proposal is to treat it similar to mix-blend-mode, where the computed value of the backdrop filter gets copied to its group pseudo
<emeyer> …Just like anything else, authors can override it
<emeyer> …See the issue for visual examples of what this looks like
<emeyer> …A complicated problem is in the context of cross-document navigation
<emeyer> …Cross-origin restrictions can create problems
<emeyer> …If we serialize the state and transition to another document, if they have different policies, it gets blocked, which is fine from a security perspective
<emeyer> …The alternative is to transfer resources across, which could leak information
<emeyer> …Proposed resolution: animate backdrop-filter for view transition similar to transform/size
<emeyer> emilio: Why is this not a problem with mix-blend-mode?
<emeyer> khush: We came up with a similar solution there, but it’s not interpolatable so it just switches over
<emeyer> …In this case, I’m proposing we set up an animation
<emeyer> astearns: Any concerns with adding backdrop-filter to the list of things that get copied over? Any objections?
<emeyer> (silence)
<emeyer> RESOLVED: animate backdrop-filter for view transitions similar to transform/size