Packages versions

"svelte": "3.29.0",
"svelte-spa-router": "3.0.3"

First reproduction

Steps to reproduce

1. Start the server opening this page: https://codesandbox.io/s/apollo-server-urql-svelte-crud-h1pcl
2. Open Incognito browser session
3. Go to reproduction: https://bjr5y.csb.app/
4. Click on “Todos list”
5. Click on “Add more random todos” button many times so the scrollbar becomes visible and Q.ty is >= 100
6. Scroll down and click on the last todo link “Open”
7. The todo shows
8. Go back with browser button
9. The list page is scrolled down, as it should be
10. Open the browser Dev Tools
11. Go to “Performance” tab
12. Change “CPU:” to “6x slowdown”
13. Click again on the last todo link “Open”
14. The todo shows
15. Go back with browser button
16. The list page is no longer scrolled down

Expected behavior

Also on slower devices the browser correctly reset the scroll when I go back to the list.

Actual behavior

On slower devices the browser does not correctly reset the scroll when I go back to the list. The scroll is always at the top of the page.

Additional

I think when I go back the DOM is still not there, the browser doesn’t wait all the rendering to succeed before scrolling down the page.

If the CPU is fast this happens. If CPU is slow NOT.

What to do?

Is there a way to tell the browser to wait for the list to render before resetting the scroll?

Gif reproduction

Second reproduction

In this case the steps are the same but you should click on “Todos list rAF”.

Here I am using a technique taken from here: https://github.com/ItalyPaleAle/svelte-spa-router/issues/77#issuecomment-593607896.

@jacwright what do you think about this issue? Your solution with RequestAnimationFrame is really awesome but is there a way to handle browser back button scroll position?

---

CodeSandBox client project CodeSandBox server project