Key block with transition breaks client side routing

[tarngerine]

Describe the bug

Using a key block with transitions (e.g. fade) will break client side routing, producing non-deterministic artifacting, including: route contents being displayed together (stacked on top of each other) and ghost key blocks (i.e. the starting, invisible versions of the fades)

I am guessing this happens because we are swapping routes mid-key-block-transition, and the client side routing conflicts with whatever code is running key block transitions?

https://user-images.githubusercontent.com/1629901/176561513-03d84f40-6db7-4b4f-b889-de7367b6b4d3.mp4

The effect gets worse as you have more key blocks

https://user-images.githubusercontent.com/1629901/176561747-e7509158-d1f8-4426-ab58-9408b11112e2.mp4

I ran into this while making a feed of auto-advancing carousels which used the key block technique to crossfade between images in each feed item.

Reproduction

https://github.com/tarngerine/key-block-bug

1. Have two routes (e.g. index.svelte, test.svelte)
2. Have links between the two pages
3. Have at least one {#key value} block with a transition:fade on the immediate child
4. Toggle between the pages

Expected:

• Routes change as expected — content is deterministic, same as when you do a fresh page load on a route

Actual:

• Route contents get stacked, e.g. Index on top of Test, and vice versa. Ghost versions of the key blocks are inserted above both at some point.

Logs

No response

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 98.20 MB / 32.00 GB
    Shell: 3.2.2 - /usr/local/bin/fish
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 102.1.39.111
    Firefox: 94.0.2
    Safari: 15.5
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.53 
    @sveltejs/kit: next => 1.0.0-next.357 
    svelte: ^3.44.0 => 3.48.0

Severity

serious, but I can work around it

Additional Information

No response

[7antra]

Did you try transition:fade|local ?

[tarngerine]

thanks, local does fix the issue. do you know why local fixes this here and what the underlying issue is?

hopefully we can still consider the above is a bug to be fixed. even if it's listening for parent mount/unmount (i.e. the route pages index and test in this case) i think it shouldn't break to this degree :/

[ivanvanderbyl]

We have a similar issue with route changes stacking the incoming page content at the bottom instead of swapping it, but we're not using transitions anywhere. It's hard to reproduce, and I haven't figured out anything that seems to trigger it, other than randomly clicking around between pages.

[kiosion]

Experiencing this issue with the latest update as well, transitions in key blocks have their content briefly duplicated on insert.

[Rich-Harris]

This is just the reality of how Svelte transitions work: outroing content remains in the DOM until the transition is complete. It's not specific to routing. To avoid duplicating content, you have to be careful to only apply transitions to elements that aren't in the document flow (thing position: absolute).

The |local modifier is a bit of a blunt instrument but it is helpful in these situations because you can make transitions happen for state changes within a page but not for navigations.

I'm going to close this as there's nothing SvelteKit could really be doing differently here. Rethinking transitions is on the roadmap for Svelte 4 though.

[mglikesbikes]

We have a similar issue with route changes stacking the incoming page content at the bottom instead of swapping it, but we're not using transitions anywhere. It's hard to reproduce, and I haven't figured out anything that seems to trigger it, other than randomly clicking around between pages.

+1