Re: [csswg-drafts] [css-view-transitions-1] Multiple elements with same view-transition-name (#8890)

Thanks for that link! You hit a very good con of the approach to tag every item in a list with a view-transition-name here: "I imagine this is fairly moot, but could also be similar to a “too many DOM nodes” performance and debugging issue."

There is a significant rendering overhead to adding `view-transition-name` on an element. The browser has to render it into a separate layer/buffer since the assumption is that it will be animated independently. But when you're going from a list to details page (or back), only one of the list items needs to animate independently. So a name on every single list item causes a lot of redundant rendering work.

The optimal way to do this is to add the name only to the list item the user clicked. This is trivial to do with script (using a `click` or `navigate` event handler) but we do want this to be possible declaratively. https://github.com/w3c/csswg-drafts/issues/8889 has our current thinking behind a declarative solution. The idea is to add navigation specific CSS so when the user is leaving the list page, you can add view-transition-names (or any other styles) depending on the destination URL. Would appreciate your feedback there! https://github.com/w3c/csswg-drafts/issues/8209 also has relevant discussion.

Coming back to this topic, the fundamental issue is that the browser needs `view-transition-name` to match 2 unique elements between the old/new DOM states respectively. We initially considered an approach similar to `querySelector`, if you find the name on multiple elements use the first one. But it ended up masking developer errors instead of selecting the element the author would've wanted. For your example, if you add the same name on every list item you don't actually want the browser to select the first item. It is better to surface the duplicate view-transition-names as an error to authors instead of guessing which one to pick.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8890#issuecomment-1574376767 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 2 June 2023 22:16:52 UTC