From 91a241d5115dd547b0b42c1fc2c4e2f66208f59f Mon Sep 17 00:00:00 2001 From: Jubayeromi Date: Thu, 5 Nov 2026 20:22:11 +0600 Subject: [PATCH 1/3] docs: explain root view transition snapshots Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- src/content/reference/react/ViewTransition.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index 17595bb763e..dfd69851bcf 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -2775,6 +2775,12 @@ React waits for any pending Navigation to finish to ensure that scroll restorati If a `startTransition` is started from the legacy popstate event, such as during a "back"-navigation then it must finish synchronously to ensure scroll and form restoration works correctly. This is in conflict with running a View Transition animation. Therefore, React will skip animations from popstate and animations won't run for the back button. You can fix this by upgrading your router to use the Navigation API. +#### Animating only the root snapshot {/*animating-only-the-root-snapshot*/} + +React starts a browser View Transition when a `` activates, but this does not guarantee that the browser's root snapshot will be available. React may cancel the root snapshot when it determines that the transition does not affect the root layout. For example, a small keyed `` can start a transition, but does not by itself guarantee that the root snapshot is kept. A boundary that changes size and affects its parent layout may cause React to keep the root snapshot; changes in a portal may also affect it. + + + --- ## Troubleshooting {/*troubleshooting*/} From 52527a8915ae3171f0cb4e3391bce65a31bd362a Mon Sep 17 00:00:00 2001 From: Jubayeromi Date: Thu, 5 Nov 2026 20:23:50 +0600 Subject: [PATCH 2/3] explaining ::view-transition-old(root) and ::view-transition-new(root) --- src/content/reference/react/ViewTransition.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index dfd69851bcf..156b912f17f 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -2779,6 +2779,8 @@ If a `startTransition` is started from the legacy popstate event, such as during React starts a browser View Transition when a `` activates, but this does not guarantee that the browser's root snapshot will be available. React may cancel the root snapshot when it determines that the transition does not affect the root layout. For example, a small keyed `` can start a transition, but does not by itself guarantee that the root snapshot is kept. A boundary that changes size and affects its parent layout may cause React to keep the root snapshot; changes in a portal may also affect it. +Because activating a boundary and keeping the root snapshot are separate, CSS for `::view-transition-old(root)` and `::view-transition-new(root)` may not run for every navigation. React does not currently document a supported pattern that guarantees a root-only snapshot for route transitions. Do not rely on a small keyed boundary as that guarantee; test the behavior with your router and target browsers. + --- From a18e972b8c12abe5698faec4ec030cd138af7306 Mon Sep 17 00:00:00 2001 From: Jubayeromi Date: Thu, 5 Nov 2026 20:25:13 +0600 Subject: [PATCH 3/3] does not create a viewport-only snapshot --- src/content/reference/react/ViewTransition.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index 156b912f17f..a8babf7db93 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -2781,7 +2781,7 @@ React starts a browser View Transition when a `` activates, but Because activating a boundary and keeping the root snapshot are separate, CSS for `::view-transition-old(root)` and `::view-transition-new(root)` may not run for every navigation. React does not currently document a supported pattern that guarantees a root-only snapshot for route transitions. Do not rely on a small keyed boundary as that guarantee; test the behavior with your router and target browsers. - +Wrapping a whole page in `` does not create a viewport-only snapshot. The browser captures the element's painted overflow, including content outside the viewport. A tall or scrolling page can therefore produce a large snapshot and use substantial memory, especially on mobile devices. Avoid wrapping a page-sized element when you only intend to animate the viewport. ---