I think `view-transition-name: auto` is poorly designed. It's an invitingly-named value that comes with footguns, and introduces unnecessary behavioural differences between cross-document and same-document transitions.
`view-transition-name: auto` is basically `view-transition-name: match-element` with an added behaviour where it takes the 'name' from the element's ID if it's available. Imagine a case where there's a list of items, where the first is the main one (bigger in size). The developer wants to create a transition where the items reorder. They use the inviting `auto` keyword, and everything seems to work (it's only using the match-element part of the feature)! Then later, another developer comes along and, in the process of added skip-links, makes sure that the first element in the list has a particular ID. This takes priority over the match-element behaviour, and the transition is broken. With larger SPAs, it's common to use an MPA navigation rather than SPA if you know there's a newer version of the site available. View transitions were designed with this in mind, as view-transition-name names work just as well across documents as same document. However, if folks use the inviting `auto` keyword, they'll get a cross-document transition that seems to half-work (depending on what IDs are coincidently there), and is likely to be broken in future (developers add and remove IDs to cater for unrelated features, such as ARIA, links, commandFor etc etc). Safari shipped this while these concerns were being raised in the CSSWG. It's sad to see Chrome joining in shipping such obvious footguns. I hope at the very least that documentation alerts developers to these gotchas. `view-transition-name: match-element` is fine, as its name more clearly expresses what it does, and documentation can be clear that it doesn't work for cross-document transitions. Dev tools can even warn when match-element is used during a cross-document transition. Jake. On Thursday, 20 March 2025 at 19:09:17 UTC Chromestatus wrote: > Contact emails nrose...@chromium.org, vmp...@chromium.org > > Explainer > https://github.com/WICG/view-transitions/blob/main/auto-name-explainer.md > > Specification > https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name > > Summary > > This intent covers two new keywords for view-transition-name: - > 'match-element' generates a unique id based on the element's identity and > renames the same for this element. This is used in Single Page App cases > where the element is being moved around and the desire is to animate it > with a view transition - 'auto' generates a unique id based on the > element's id attribute. This value remains the same for the same ids > regardless of the element, but does not otherwise match the > view-transition-name named with the same ident as the id. This can be used > in both Single and Multi Page Apps to match elements based on their id > attributes. Allow the 'auto' keyword as a value for the > 'view-transition-name' CSS property. This generates a unique name for the > element, and reduces the burden of having to invent unique names for > participating elements. > > > Blink component Blink>CSS > <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ECSS%22> > > TAG review https://github.com/w3ctag/design-reviews/issues/1001 > > TAG review status Issues addressed > > Risks > > > Interoperability and Compatibility > > None > > > *Gecko*: No signal ( > https://github.com/mozilla/standards-positions/issues/1198) > > *WebKit*: Shipped/Shipping ( > https://webkit.org/blog/16301/webkit-features-in-safari-18-2) > > *Web developers*: Positive This is a highly requested feature to prevent > the need to uniquely identify each participating view transition element. > > *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 > > > 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/css-view-transitions/auto-name-from-id.html?label=experimental&label=master&aligned > > https://wpt.fyi/results/css/css-view-transitions/navigation/auto-name-from-id.html?label=experimental&label=master&aligned > > > Flag name on about://flags > > Finch feature name CSSViewTransitionAutoName > > Requires code in //chrome? False > > Tracking bug https://issues.chromium.org/issues/399877975 > > Estimated milestones > Shipping on desktop 136 > Shipping on Android 136 > Shipping on WebView 136 > > 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/6575974796492800?gate=5170335230722048 > > Links to previous Intent discussions Intent to Prototype: > https://groups.google.com/a/chromium.org/d/msgid/blink-dev/66fe6d9c.2b0a0220.d54b7.1136.GAE%40google.com > > > > 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. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/0fd4bc8d-0bb1-4c06-819e-e0db8904fe6fn%40chromium.org.
