Skip to content

Commit

Permalink
Limit the scope of cancellations to documentElement
Browse files Browse the repository at this point in the history
This is in preparation for nested View Transitions. In that case we
shouldn't cancel other nested View Transitions than the one we started.
  • Loading branch information
sebmarkbage committed Mar 7, 2025
1 parent 33a135f commit 9be9159
Showing 1 changed file with 11 additions and 6 deletions.
17 changes: 11 additions & 6 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -1550,16 +1550,20 @@ export function hasInstanceAffectedParent(
return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
}

function cancelAllViewTransitionAnimations(ownerDocument: Document) {
function cancelAllViewTransitionAnimations(scope: Element) {
// In Safari, we need to manually cancel all manually start animations
// or it'll block or interfer with future transitions.
const animations = ownerDocument.getAnimations();
const animations = scope.getAnimations({subtree: true});
for (let i = 0; i < animations.length; i++) {
const anim = animations[i];
const effect: KeyframeEffect = (anim.effect: any);
// $FlowFixMe
const pseudo: ?string = effect.pseudoElement;
if (pseudo != null && pseudo.startsWith('::view-transition')) {
if (
pseudo != null &&
pseudo.startsWith('::view-transition') &&
effect.target === scope
) {
anim.cancel();
}
}
Expand Down Expand Up @@ -1655,7 +1659,7 @@ export function startViewTransition(
}
transition.ready.then(spawnedWorkCallback, spawnedWorkCallback);
transition.finished.then(() => {
cancelAllViewTransitionAnimations(ownerDocument);
cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
// $FlowFixMe[prop-missing]
if (ownerDocument.__reactViewTransition === transition) {
// $FlowFixMe[prop-missing]
Expand Down Expand Up @@ -1841,7 +1845,8 @@ export function startGestureTransition(
const pseudoElement: ?string = effect.pseudoElement;
if (
pseudoElement != null &&
pseudoElement.startsWith('::view-transition')
pseudoElement.startsWith('::view-transition') &&
effect.target === documentElement
) {
// Ideally we could mutate the existing animation but unfortunately
// the mutable APIs seem less tested and therefore are lacking or buggy.
Expand Down Expand Up @@ -1932,7 +1937,7 @@ export function startGestureTransition(
: readyCallback;
transition.ready.then(readyForAnimations, readyCallback);
transition.finished.then(() => {
cancelAllViewTransitionAnimations(ownerDocument);
cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
// $FlowFixMe[prop-missing]
if (ownerDocument.__reactViewTransition === transition) {
// $FlowFixMe[prop-missing]
Expand Down

0 comments on commit 9be9159

Please sign in to comment.