Transition cleanup happens too early if Kit is already running

Describe the bug

On Chrome, if Svelte is already loaded on the page and refreshed (and sometimes routed to), any in: transition triggered by onMount will remove the animation before fully transitioned, causing the transition to jump to its final state.

https://user-images.githubusercontent.com/20071081/127706043-3e111ff8-4d19-4aa1-836a-7e5e115dd575.mov

Reproduction

https://jumpy-intros.vercel.app/some

https://github.com/iltimasd/jumpy-intros

Logs

No response

System Info

System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
    Memory: 52.05 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.15.1 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.107
    Chrome Canary: 94.0.4590.2
    Edge: 92.0.902.62
    Firefox: 90.0
    Safari: 13.0.4
  npmPackages:
    @sveltejs/adapter-vercel: next => 1.0.0-next.26 
    @sveltejs/kit: next => 1.0.0-next.139 
    svelte: ^3.34.0 => 3.41.0

Severity

annoyance

Additional Information

I have yet to find a workaround.

[iltimasd]

I’m hitting an interesting wall trying to debug what’s going. I’ve decided to try adding some breakpoint in the transition cleanup portion of the bundled svelte. However if I add any breakpoints, the error goes away; presumably because the breakpoints are adding some sort of delay that allow the cleanup to happen on time. (edit: or! perhaps its the start time that’s actually wrong??)

Edit:

And I should add commenting cleanup() out solves the visual bug

[ethandpowers]

I’m having this issue as well. I was able to get around it by wrapping the trigger in a setTimeout() call like such:

let mounted = false;

onMount(() => {
    setTimeout(() => {
        mounted = true;
    }, 500);
});

{#if mounted}
    <h1 transition:fly|local={{ x: 200, duration: 1500 }}>Hello World!</h1>
{/if}

The timeout is not super noticeable, but it’s certainly not ideal. I’ve played around with a few different durations and found that 500 works best for me.