Skip to content

Commit 7e8fb58

Browse files
committed
Limit the scope of cancellations to documentElement
This is in preparation for nested View Transitions. In that case we shouldn't cancel other nested View Transitions than the one we started.
1 parent 33a135f commit 7e8fb58

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1550,16 +1550,16 @@ export function hasInstanceAffectedParent(
15501550
return oldRect.height !== newRect.height || oldRect.width !== newRect.width;
15511551
}
15521552

1553-
function cancelAllViewTransitionAnimations(ownerDocument: Document) {
1553+
function cancelAllViewTransitionAnimations(scope: Element) {
15541554
// In Safari, we need to manually cancel all manually start animations
15551555
// or it'll block or interfer with future transitions.
1556-
const animations = ownerDocument.getAnimations();
1556+
const animations = scope.getAnimations({ subtree: true });
15571557
for (let i = 0; i < animations.length; i++) {
15581558
const anim = animations[i];
15591559
const effect: KeyframeEffect = (anim.effect: any);
15601560
// $FlowFixMe
15611561
const pseudo: ?string = effect.pseudoElement;
1562-
if (pseudo != null && pseudo.startsWith('::view-transition')) {
1562+
if (pseudo != null && pseudo.startsWith('::view-transition') && effect.target === scope) {
15631563
anim.cancel();
15641564
}
15651565
}
@@ -1655,7 +1655,7 @@ export function startViewTransition(
16551655
}
16561656
transition.ready.then(spawnedWorkCallback, spawnedWorkCallback);
16571657
transition.finished.then(() => {
1658-
cancelAllViewTransitionAnimations(ownerDocument);
1658+
cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
16591659
// $FlowFixMe[prop-missing]
16601660
if (ownerDocument.__reactViewTransition === transition) {
16611661
// $FlowFixMe[prop-missing]
@@ -1932,7 +1932,7 @@ export function startGestureTransition(
19321932
: readyCallback;
19331933
transition.ready.then(readyForAnimations, readyCallback);
19341934
transition.finished.then(() => {
1935-
cancelAllViewTransitionAnimations(ownerDocument);
1935+
cancelAllViewTransitionAnimations((ownerDocument.documentElement: any));
19361936
// $FlowFixMe[prop-missing]
19371937
if (ownerDocument.__reactViewTransition === transition) {
19381938
// $FlowFixMe[prop-missing]

0 commit comments

Comments
 (0)