Scroll position is not preserved after a page reload

[sebbayer]

Since 4.6.0, the scroll position is no longer preserved on a page reload in Chrome and Firefox.

Reproduction

Not really possible on Vue SFC Playground because of the iframe. Use pnpm play in this repo instead.

Steps to reproduce the bug

Scroll down the page and reload it.

Expected behavior

Scroll position should be preserved after the reload.

Actual behavior

After the reload the page is scrolled back to the top.

Additional information

I created #2680 to fix this.

[posva]

Thanks for the PR, unfortunately we are not adding back the beforeunload because it has other issues. I think that the way forward is to split the scrollBehavior into an addon/plugin, investigate what is still needed with the Navigation API and maybe allow users to opt-in into a beforeunload event to preserve the scroll. We could also periodically save the scroll position but I rather avoid it for now, users can always manually replaceState to update history.state.scroll if they need this preserve scroll position on reload. Another option is to use history.scrollRestoration auto instead of manual but it doesn't work that well.

Leaving this open as a reminder to revisit the topic with the upcoming Navigation API

[sebbayer]

I understand, but I just wanted to point out that on non-Vue websites, the scroll position is preserved even after reloading the page. Therefore, I don't think this should be an opt-in behavior.

The scrollBehavior documentation states:

"The third argument, savedPosition, is only available if this is a popstate navigation (triggered by the browser's back/forward buttons)."

However, I still consider it a breaking change, because prior to version 4.6.0, a savedPosition parameter was always provided after a reload.

[posva]

search beforeunload and bfcache in issues and prs if you want to learn more about the reasoning behind this