Intent to Ship: Element-scoped view transitions

[Steve Kobes]

Contact emails

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

Explainer

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

Specification

https://drafts.csswg.org/css-view-transitions-2

Design docs

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

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

Web Feature ID

view-transitions-element-scoped

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

https://github.com/w3ctag/design-reviews/issues/1188

TAG review status

Issues addressed

Risks

Interoperability and Compatibility

No compatibility risk as this is a new API. Some interoperability risk due to lack of signals from other browsers. See requests for standards positions from WebKit / Firefox below.

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

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/611)

Web developers: Positive (https://github.com/w3c/csswg-drafts/issues/9890#issuecomment-1927179371) Top feature request from surveyed web authors re. "what is missing from View Transitions".

Other signals: "I'm salivating." - https://bsky.app/profile/samwho.dev/post/3mf52aozscc24

Ergonomics

None.

Activation

None.

Security

Scoped view transitions introduces no new security risks. Security considerations applicable to view transitions in general are described at: https://www.w3.org/TR/css-view-transitions/#sec Scoped view transitions are only for same-document (SPA) transitions, and do not affect cross-document (MPA) transitions.

WebView application risks

None. This feature does not deprecate or change behavior of existing APIs.

Debuggability

DevTools supports inspecting the transition pseudo-tree and pausing / scrubbing the transition animations from the Animations tab. These features work in the same way for both document-scoped and element-scoped view transitions.

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

Yes
Supported on all Blink platforms.

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

Yes
WPT directory: css/css-view-transitions/scoped Dashboard link: https://wpt.fyi/results/css/css-view-transitions/scoped?label=experimental&label=master&aligned

DevTrial instructions

https://github.com/WICG/view-transitions/blob/main/scoped-transitions.md#how-to-use

Flag name on about://flags

enable-experimental-web-platform-features

Finch feature name

ScopedViewTransitions

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/394052227

Measurement

Usage is measured by the web feature "ViewTransitionsElementScoped": https://chromestatus.com/metrics/webfeature/timeline/popularity/281

Estimated milestones

Shipping on desktop	147
DevTrial on desktop	140
Shipping on Android	147
DevTrial on Android	140
Shipping on WebView	147

Anticipated spec changes

There is an issue open for the CSS WG to resolve on the name of the containment API, which is currently "view-transition-scope: auto": https://github.com/w3c/csswg-drafts/issues/13123

Link to entry on the Chrome Platform Status

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

Links to previous Intent discussions

Intent to Prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/67abaada.2b0a0220.1b0c0.01f4.GAE%40google.com
Ready for Trial: https://groups.google.com/a/chromium.org/g/blink-dev/c/kafnCyjDMrw/m/4XkuFmk7BgAJ

This intent message was generated by Chrome Platform Status.