Skip to content

Latest commit

 

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Page briefly jumps to the top before restoring scroll on reload

Which project does this relate to?

Router (reproduced in a TanStack Start application).

Describe the bug

When reloading a page after scrolling down, the page briefly jumps to the top and then returns to the position where it was reloaded.

The final scroll position is correct. The problem is the visible jump before restoration completes. I observe this in Chrome and Safari, including when running this minimal example in development mode. It can be intermittent, so repeated reloads may be necessary.

Complete minimal reproducer

Requirements: Node.js 22.12+ and pnpm 10.32.1. No environment variables or external services are needed.

After cloning the repository:

pnpm install --frozen-lockfile
pnpm dev

Open the local URL printed by Vite.

To run a production build instead:

pnpm build
pnpm start

Open the URL printed by the server.

Steps to Reproduce the Bug

  1. Start the application with pnpm dev and open the URL printed by Vite in Chrome or Safari.
  2. Scroll down to approximately section 10.
  3. Wait a moment, then reload the page with Command + R on macOS.
  4. Watch the page briefly show the pink header at the top before returning to the previous scroll position.
  5. Repeat the reload several times if it does not happen initially. Also try a hard reload (Command + Shift + R in Chrome), and specify which reload method is shown in the attached video.

Expected behavior

Reloading should preserve the previous scroll position without visibly jumping to the top first.

Screenshots or Videos

Attach your manual recording to the GitHub issue here.

Platform

  • Router version: @tanstack/react-router 1.170.39
  • Start version: @tanstack/react-start 1.168.58
  • OS: macOS — add your macOS version
  • Browser: Chrome and Safari
  • Browser versions: add the versions used for the recording
  • Bundler: Vite
  • Bundler version: 8.3.1
  • React / React DOM: 19.3.0
  • Server adapter: Nitro 3.0.260903-beta

Exact dependencies are captured in pnpm-lock.yaml.

Additional context

The router uses:

createRouter({
  routeTree,
  scrollRestoration: true,
  scrollRestorationBehavior: "instant",
});

The example contains one long page with fixed-height sections and inline CSS. There are no route loaders, images, external fonts, animations, custom scroll handlers, artificial delays, proxies, test instrumentation, or workaround scripts.

The issue was first noticed in a production application, but I also observe it in development with this minimal example. I have not established whether the cause is Router, Start, or browser scroll-restoration behavior.

About

Minimal TanStack Start reproduction: page briefly jumps to the top before restoring scroll on reload.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages