search

ItalyPaleAle / svelte-spa-router

Router for SPAs using Svelte 3
MIT License
1.53k stars 105 forks source link

A bug from svelte-spa-router and scroll #278

Open mowtwo opened 1 year ago

mowtwo commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

https://user-images.githubusercontent.com/43508/193609602-048de8eb-f49a-4a83-b0da-665cd7ace750.mov

mowtwo commented 1 year ago

@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 commented 1 year ago

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

https://user-images.githubusercontent.com/41664636/194680124-4f39feaf-104b-4ced-9d4c-1eea7251112b.mp4

ItalyPaleAle commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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.