Skip to content

[css-view-transitions-2] Skip only a duplicate element instead of the whole transition #13858

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
noamr merged 2 commits into from
Apr 29, 2026
Merged

[css-view-transitions-2] Skip only a duplicate element instead of the whole transition #13858

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f64b2d5
[css-view-transitions-2] Skip only a duplicate element instead of th…
noamr Apr 29, 2026
c2e2627
Add console.warn note
noamr Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions css-view-transitions-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,8 +553,7 @@ spec:css2; type:dfn; text:viewport
and the transition is initiated.

Note that {{ViewTransitionUpdateCallback|updateCallback}}, if provided, is *always* called,
even if the transition cannot happen
(e.g. due to duplicate `view-transition-name` values).
even if the transition cannot happen.
The transition is an enhancement around the state change, so a failure to create a transition never prevents the state change.
See [[#transitions-as-enhancements]] for more details on this principle.

Expand Down Expand Up @@ -609,8 +608,7 @@ Note: An <code>element.startViewTransition()</code> call does not update
and the transition is initiated.

Note that {{ViewTransitionUpdateCallback|updateCallback}}, if provided, is *always* called,
even if the transition cannot happen
(e.g. due to duplicate `view-transition-name` values).
even if the transition cannot happen.
The transition is an enhancement around the state change, so a failure to create a transition never prevents the state change.
See [[#transitions-as-enhancements]] for more details on this principle.

Expand Down Expand Up @@ -716,8 +714,7 @@ the active view transition of an element is exposed to script via a property on
and the animation is about to start.

It rejects if the transition cannot begin.
This can be due to misconfiguration, such as duplicate 'view-transition-name's,
or if {{ViewTransition/updateCallbackDone}} returns a rejected promise.
This can be due to misconfiguration, e.g. if {{ViewTransition/updateCallbackDone}} returns a rejected promise.

The point that {{ViewTransition/ready}} fulfills
is the ideal opportunity to animate the [=view transition pseudo-elements=]
Expand Down Expand Up @@ -2348,6 +2345,9 @@ A 'view-transition-name' generated by <css>auto</css> is a [=tree-scoped name=].

: <dfn for="captured element">old border width</dfn>
:: 'border-width' [=used value=] (top, right, bottom and left pixel values) or null, initially null.

: <dfn for="captured element">duplicate</dfn>
:: A boolean, initiallly false.
</dl>

In addition, a [=captured element=] has the following <dfn for="captured element">style definitions</dfn>:
Expand Down Expand Up @@ -2483,6 +2483,10 @@ It has the following [=struct/items=]:
If failure is returned, then [=skip the view transition|skip=] |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

1. [=list/Remove=] from |transition|'s [=ViewTransition/named elements=] every entry whose value's [=captured element/duplicate=] is true.

Note: User agents are encouraged to alert the developer that the duplicate was removed, e.g. via a console warning.

1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:

1. If |capturedElement|'s [=captured element/new element=] is not null,
Expand Down Expand Up @@ -2512,8 +2516,6 @@ It has the following [=struct/items=]:

1. Let |namedElements| be |transition|'s [=ViewTransition/named elements=].

1. Let |usedTransitionNames| be a new [=/set=] of strings.

1. Let |captureElements| be a new [=/list=] of elements.

1. If the [=snapshot containing block size=] exceeds an [=implementation-defined=] maximum, then return failure.
Expand Down Expand Up @@ -2548,22 +2550,14 @@ It has the following [=struct/items=]:
or |element| is [=element-not-rendered|not rendered=],
then [=continue=].

1. If |usedTransitionNames| [=list/contains=] |transitionName|, then:

1. [=list/For each=] |element| in |captureElements|:

1. Set |element|'s [=captured in a view transition=] to false.

1. Return failure.
1. If |namedElements|[|transitionName|] exists, then set |namedElements|[|transitionName|]'s [=captured element/duplicate=] to true and [=continue=].

1. If <em>any other</em> [=active view transition=] contains |element|
in its [=captured elements=],
then for each such [=active view transition=],
in [=tree order=] of their corresponding [=ViewTransition/root elements=],
[=skip the view transition|skip=] that view transition with an "{{AbortError}}" {{DOMException}} in |document|’s [=relevant Realm=].

1. [=set/Append=] |transitionName| to |usedTransitionNames|.

1. Set |element|'s [=captured in a view transition=] to true.

1. [=list/Append=] |element| to |captureElements|.
Expand Down Expand Up @@ -2646,6 +2640,8 @@ It has the following [=struct/items=]:
This implies than names which only exist in the new DOM (entry animations) will be painted on top of names only in the old DOM (exit animations) and names in both DOMs (paired animations).
This might not be the right layering for all cases. See <a href="https://github.com/w3c/csswg-drafts/issues/8941">issue 8941</a>.

1. If |namedElements|[|transitionName|]'s [=new element=] is not null, then set |namedElements|[|transitionName|]'s [=captured element/duplicate=] to true.

1. Set |namedElements|[|transitionName|]'s [=new element=] to |element|.
</div>

Expand Down