Intent to Prototype: Scoped view transitions

[Chromestatus]

Contact emails

sko...@chromium.org, kev...@chromium.org

Explainer

https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md

Specification

None

Summary

Exposes element.startViewTransition() on arbitrary HTML elements. The element establishes a scope for the transition, which means that the transition pseudo-elements are affected by ancestor clips and transforms, and multiple transitions on separate elements can run concurrently.

Blink component

Blink>CSS

Motivation

View transitions are currently a "global" document-level concept, which means components cannot use transitions without sacrificing composability. For more details, see the explainer.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/9890

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal

WebKit: No signal

Web developers: No signals

Other signals:

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

None

Is this feature fully tested by web-platform-tests?

No

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5109852273377280?gate=5097303670784000

This intent message was generated by Chrome Platform Status.

[Jake Archibald]

This is great to see. I get a lot of questions around "why do view transitions break z-indexing?", and it's cases where on-top content that isn't going to be part of the transition ends up flattened into the root group, and therefore appears underneath transitioning content. This will be things like drop-down menus, sticky headers, toast notifications. It becomes a bit of a whack-a-mole game to give all of these things view-transition-names so they can remain on top.

But, in these cases the developer is trying to transition "main content", so they're really trying to scope it there, but just doing it in a hacky way.

First-class support for this is exciting!