Skip to content
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.

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

Cancel finished view transitions Animations manually in fire-and-forget too #32545

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

sebmarkbage
Copy link
Collaborator

Otherwise these can survive into the next View Transition and cause havoc to that transition.

This was appearing as a flash in Safari in the fixture when going from A->B. This triggers a View Transition and at the same time the scroll position updates in an effect. That fires a scroll event which starts a gesture. This shouldn't really happen and the SwipeRecognizer should ideally ignore those but it's good to surface edge cases. That gesture is blocked on the View Transition finishing and then immediately after it starts a gesture View Transition. That gesture then picked up the former Animation from the previous transition which caused issues. This PR fixes that flash.

@sebmarkbage sebmarkbage requested a review from jackpope March 7, 2025 04:12
@github-actions github-actions bot added the React Core Team Opened by a member of the React Core Team label Mar 7, 2025
@@ -1817,6 +1833,9 @@ export function startGestureTransition(
}
for (let i = 0; i < animations.length; i++) {
const anim = animations[i];
if (anim.playState !== 'running') {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This alone doesn't really help anything because the "finished" animations seems to interfere regardless but we shouldn't really restart any animation here. We expect all of them to be running. So this is just defensive coding.

@react-sizebot
Copy link

react-sizebot commented Mar 7, 2025

Comparing: cc68006...4342179

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 518.54 kB 518.54 kB = 92.45 kB 92.45 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.06% 589.31 kB 589.66 kB +0.05% 104.91 kB 104.96 kB
facebook-www/ReactDOM-prod.classic.js +0.07% 642.76 kB 643.21 kB +0.07% 113.01 kB 113.09 kB
facebook-www/ReactDOM-prod.modern.js +0.07% 633.08 kB 633.53 kB +0.07% 111.44 kB 111.52 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 9be9159

This is in preparation for nested View Transitions. In that case we
shouldn't cancel other nested View Transitions than the one we started.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants