A bug from svelte-spa-router and scroll

[mowtwo]

When I scroll on a page and then switch routes, scroll on this new page, and then use the browser's native back button to return, I will find that the page content has not been properly destroyed

This is a minimal case

[ItalyPaleAle]

Hi @mowtwo I tried cloning your repo but I can't reproduce the issue. Going back to the previous page, I see the same content I saw at the beginning.

What is the issue you're experiencing?

[mowtwo]

Hi @mowtwo I tried cloning your repo but I can't reproduce the issue. Going back to the previous page, I see the same content I saw at the beginning.

What is the issue you're experiencing?

Hi @ItalyPaleAle
The problem is that when I switch pages through the browser's return button, the page components will not be destroyed correctly.
I think it may be a performance problem. I found this bug in the browser of Windows computers and the webview of Android phones with low performance. However, this problem may be caused by the use of real dom by svelte.

[ItalyPaleAle]

Can you share a screenshot/screencap of the issue? This is what it looks like on my laptop:

Screen.Recording.2022-10-03.at.07.57.58.mov

[mowtwo]

@ItalyPaleAle
I'd like to share screenshot/screencap 😯, but I'm on national holiday,and I may need to wait five days to share screenshot/screencap on the company's computer.
This bug appears in one of my projects, it may also be related to the transition function, because after I delete some transition, this bug will not reappear.
If you want to reproduce on a MacBook with good performance, you can set the length of the Array. from that creates the list in the Sub.svelte
file to a larger value, such as 200 or 300

[mowtwo]

Hi @ItalyPaleAle ,This video is the process of reproducing bugs

1. Scroll once on the first page
2. Click the sub link
3. Scroll once on the sub page to make the scroll top larger than the first page
4. Click the browser's return button

svelte-spa-router-bug.mp4

[ItalyPaleAle]

Thanks for sharing that. Interestingly, I can reproduce the issue too but I am not sure this is a bug in the router. I was able to confirm the router is detecting the change in the route and notifying that.

I am leaning towards this possibly being a bug in Svelte itself?

[da-z]

Indeed, thank you! I just had the same glitch: on route change both old and new inner contents were loaded for a very short while, equivalent to the svelte transition time I had set on the component. After removing transition I no longer see the glitch.

One can probably reproduce by adding this on a routed page.

<div transition:fade={{ duration: 1000 }}>GLITCH</div>

[mowtwo]

Thanks for sharing that. Interestingly, I can reproduce the issue too but I am not sure this is a bug in the router. I was able to confirm the router is detecting the change in the route and notifying that.

I am leaning towards this possibly being a bug in Svelte itself?

I agree with you, but I can't find the specific cause of the problem correctly at present. I hope you can help me find the problem. Thank you.

[ItalyPaleAle]

@mowtwo may be related to transitions given @da-z’s feedback. Also it wouldn’t be the first time transitions in svelte have caused bugs like these.