Restoring scroll position takes too long

[Dananz]

Environment

Same as nuxt.com because Im using nuxt.com the example.

Reproduction

https://nuxt.com

Steps to reproduce:

1. Scroll down a bit
2. Press ctrl+R
3. Page should reload and stay in same scroll position but it takes about 400-500ms to restore scroll position

Describe the bug

Nuxt needs to wait until fully hydrated in order to restore scrolling position.
Other web frameworks are not waiting for full hydration and do it instantly on page load.

Additional context

GIF Example:

Logs

No response

[L422Y]

Minimal reproductions with no modules:
https://github.com/L422Y/scroll-restore

With basic content and no NuxtPage things work as expected:
https://scroll-restore-hz4fqvbf1-l422y.vercel.app

As soon as we start using NuxtPage (even without images) there is a small but noticeable delay:

https://scroll-restore.vercel.app/no-images

https://scroll-restore.vercel.app/defined-image-sizes

https://scroll-restore.vercel.app/undefined-image-sizes

[Dananz]

Minimal reproductions with no modules: https://github.com/L422Y/scroll-restore

@L422Y, thanks you for your efforts in creating a minimal reproduction!

While testing your demos on my iPhone, I noticed an issue: the scroll position is not restored after refreshing the page. This problem is not only present in your demo but also reproducible on nuxt.com and in my own application.

Attaching a example video demonstrating the bug. For reference, I am using an iPhone 12 Pro Max running iOS 17.2.1.

RPReplay_Final1704305336.MP4

[manniL]

@Dananz not sure if that should be a default behavior? 🤔
But you can change that e.g. with a custom scroll behavior (see e.g. https://github.com/manniL/lichter.io/blob/main/app/router.options.ts#L4-L6)

[bernhardberger]

The issue isn't nuxt, it's in upstream vue-router that disables history scroll restoration as soon as a custom ScrollBehavior is defined.

This is fixed in my PR by temporarily re-enabling scroll restoration when appropriate: #24960