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 7e8fb58
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -1550,16 +1550,16 @@ 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 +1655,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 @@ -1932,7 +1932,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 7e8fb58

Please sign in to comment.