Pages get stacked when using svelte transition

[hcrohland]

Hi,

I have a Svelte app using the svelte-spa-router. The main page consists of an grid of bootstrap cards which are instantiated with svelte transition:slide. If I switch from the main page to another page the main page often - but not always - does not disappear. Instead the new page is rendered below the existing page. This can even happen multiple times stacking pages on pages.

If I remove the transition from the cards all works fine.

I tried to replicate this with a simple example to no avail so far. So sorry for the

[ItalyPaleAle]

Can you please share some code to reproduce the issue? I'm afraid, without it will be impossible to debug this.

[hcrohland]

Okay, found a second condition: It needs to also use and modify a store between pages.

And here is a REPL to replicate: https://svelte.dev/repl/2897c6f2cee7479fa41416e93ce75970?version=3.43.0

[ItalyPaleAle]

This is very helfpul.

However, looks like this is not an issue with the router itself, but an issue upstream with the Svelte compiler.

I was able to replicate the issue here without using the router: https://svelte.dev/repl/193b233e492c4c75b0d0fd07604c7165?version=3.43.0

In particular, this only happens when you set a component with <svelte:component this={page} /> and not if you set the component directly (such as {#if page == 'xx'} <Page1 /> {/if}).

Would you mind opening an issue with the Svelte team directly? Hopefully what I found above can help them too :)

[hcrohland]

Opened a bug with the svelte team: sveltejs/svelte#6779

[ItalyPaleAle]

Thank you! I also just noticed that my use of setTimeout (which I added trying to figure out what could cause the issue, building iteratively adding things that svelte-spa-router uses) wasn't necessary, so I removed it from the REPL.

[abezulski]

I had exactly the same issue using nested routing, store and transition - navigation between categories /#/listings/active or /#/listings/expired was fine, but navigating to main page /#/listings and back to category would result in stacked pages. My workaround to this issue was to remove nested routing (explained here: #20 (comment)).

[algaly]

Try replacing your a tag with button and use the push method.
Worked for me! (even with animation)

[michaelphipps]

The button method didn't work for me, however I found this sveltejs/svelte#6226 (comment) that provided a workable solution

... another solution I came across is adding |local to the out animation.

<div
  in:fly="{{ y: -100, duration: 200 }}"
  out:fly|local="{{ y: 100, duration: 200 }}"
>