Svelte transition seems to finish too soon

Question

I'm trying to build a simple transition in Svelte where I have cards that animate in on page load. I've followed this answer to get it to fire correctly onMount, so that has been ok. However, the transition itself seems to "jump" to the end too quickly, and skips the last few frames.

GIF of problem running on localhost.

Oddly enough, when I copy and paste the same code into the REPL, the visual bug seems to be fixed. I've even downloaded the REPL and run locally, and the bug still appears.

Here is the code.

<script>
    import { fly } from 'svelte/transition';
    import { onMount } from 'svelte';
    const contents = [
        {
            id: 1,
        },
        {
            id: 2,
        },
        {
            id: 3,
        },
    ];

    let ready = false;
    onMount(() => (ready = true));
</script>

<main>
    <div class="topBar" />
    <div class="container">
        {#if ready}
            {#each contents as content, i}
                <div
                    class="transCard"
                    transition:fly={{ y: 80, duration: 1000, delay: i * 200 }}
                />
            {/each}
        {/if}
    </div>
</main>

<style>
    main {
        background: white;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        overflow: hidden;
        margin-top: 80px;
    }

    .topBar {
        width: 100vw;
        height: 80px;
        background: black;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .transCard {
        width: 100%;
        height: 200px;
        background: gray;
    }
</style>

Answer 1

Found the answer myself! Not sure why it fixed it, but for me changing transition to just in seems to have cured the visual bug.