AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

Navigation Fails To Scroll To Top When Suspense Fallback Renders No DOM Nodes

When a route segment uses <Suspense fallback={null}> and the content suspends initially, the InnerScrollHandler effect in layout-router.tsx returns early because no client rects are available, preventing the expected scroll-to-top on navigation. The scroll only occurs on a later navigation. A ResizeObserver-based fix ensures the effect reruns once the suspended content lays out.

highConfidence 88%Next.jsAffected V16.4.0Affected Vcanary

Origin Analysis

In layout-router.tsx, the InnerScrollHandler effect attempts to scroll to the first element matching '[data-nextjs-scroll-focus-boundary]'. If the segment fragment has no client rects at commit time (e.g., fallback={null} renders no host nodes, or the segment is not yet hydrated), the effect exits early without scheduling any follow-up. No subsequent rerun is triggered when the suspended content eventually appears.
1. Create a layout with a tall sidebar where a link sits at the bottom. 2. Wrap the target page's dynamic content in <Suspense fallback={null}>. 3. Scroll down to the link and click it. 4. Observe that the new page renders but the window keeps the old scroll position instead of scrolling to the top.

Fixing Code Block

Edge Case Audit

The ResizeObserver may cause a brief visual jump if the content layout shifts multiple times, as scrollTo is called on every resize. To mitigate, guard against repeated scrolling when already at the top. Older browsers without ResizeObserver will fall back to no auto-rerun, retaining the original bug. The fix should be reverted once an official upstream patch is available, as it overrides internal component logic and may conflict with future changes. Always test in concurrent rendering and with multiple suspense boundaries to ensure no unintended scroll resets.

Ecosystem Topology