SvelteKit中in:fly动画结尾跳变问题求助

我有一个SvelteKit应用，包含两个带文本的div，目标是为这些文本div添加in:fly动画及缓动函数。但动画结束时出现跳变，缓动函数未完成完整动画，效果如下：

对应代码：

<script>
    import { fly } from 'svelte/transition';
    import { onMount } from 'svelte';
    import { circOut } from 'svelte/easing';

    let mounted = false;

    onMount(() => {
        mounted = true;
    });
</script>

{#if mounted}
    <main class="w-full h-screen flex items-center justify-center">
        <div class="w-full max-w-7xl flex">

            <div class="w-3/4 flex flex-col gap-3">
                <!-- Text 1 -->
                <div class="h-40 relative overflow-hidden">
                    <div
                        class="absolute inset-0 text-9xl"
                        in:fly={{ y: 150, duration: 1100, easing: circOut }}
                    >
                        Some
                    </div>
                </div>

                <!-- Text 2 -->
                <div class="h-40 relative overflow-hidden">
                    <div
                        class="absolute inset-0 text-9xl"
                        in:fly={{ y: 150, duration: 1000, delay: 100, easing: circOut }}
                    >
                        Title
                    </div>
                </div>
            </div>

            <div class="w-1/4 bg-blue-300" />
        </div>
    </main>
{/if}

保存文件后热刷新页面时不会出现此问题。

我尝试过以下操作但无效：

• 使用其他缓动函数
• 移除div的绝对定位

效果如下：

编辑1：仅保留单个文本元素时，问题仍存在，代码如下：

<script>
    import { fly } from 'svelte/transition';
    import { onMount } from 'svelte';
    import { circOut } from 'svelte/easing';

    let mounted = false;

    onMount(() => {
        mounted = true;
    });
</script>

{#if mounted}
    <div class="text-9xl" in:fly={{ y: 150, duration: 1100, easing: circOut }}>Text</div>
{/if}

编辑2：

• 已制作最小复现示例（MRE）
• 问题在Chrome、Chrome访客模式、Chrome for Android中存在
• Firefox中无此问题

编辑3：

• 即使不使用缓动函数，问题仍会出现（最初误以为是缓动函数导致）

内容的提问来源于stack exchange，提问作者notnavindu