Svelte中使用View Transition API出现闪烁问题求助

我在使用View Transition API实现缩放动画时遇到了闪烁问题，不清楚原因。我仅需实现一个缩放动画，尝试过await svelte tick()但问题依旧。

以下是完整代码：

<script lang="ts">
    let seeking = $state(false);

    function seek() {
        document.startViewTransition(() => {
            seeking = true
        });
    }

    function cancelSeek() {
        document.startViewTransition(() => {
            seeking = false
        });
    }
</script>

<div class="rounded-lg border border-yellow-400/20 min-w-150">
    <div class={['quick-game overflow-hidden', { seeking }]}>
        <div class="relative rounded-lg p-4 [view-transition-name:quick-game-content]">
            {#if seeking}
                <div class="grid items-center gap-4">
                    <p>Seeking game...</p>
                    <p>3+0</p>
                    <p>Blitz</p>
                    <p>Active players: 69420</p>
                    <button class="rounded-lg bg-yellow-600 p-2 py-1 text-black" onclick={cancelSeek}>cancel seek</button>
                </div>
            {:else}
                <div class="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-4">
                    {#each Array.from({ length: 12 }) as _, i}
                        <button
                            class="flex h-full items-center justify-center gap-1 rounded-lg border-2 border-yellow-400 bg-yellow-600/10 p-2 text-xl tracking-wide text-primary transition duration-100 ease-in-out hover:bg-yellow-600/20 hover:text-yellow-400 active:bg-yellow-600/30"
                            onclick={seek}
                        >
                            <div class="flex flex-1 flex-col gap-2 text-start">
                                <p>{i+1}+0</p>
                                <p>Blitz</p>
                            </div>
                            <span>🤓</span>
                        </button>
                    {/each}
                </div>
            {/if}
        </div>
    </div>
</div>

<style>
    ::view-transition-old(quick-game-content) {
        animation: scale-out 2s ease-in-out;
    }
    ::view-transition-new(quick-game-content) {
        animation: scale-in 2s ease-in-out;
    }

    @keyframes scale-in {
        from {
            scale: 0;
            opacity: 0;
        }
        to {
            scale: 1;
            opacity: 1;
        }
    }

    @keyframes scale-out {
        from {
            scale: 1;
            opacity: 1;
        }
        to {
            scale: 0;
            opacity: 0;
        }
    }
</style>

注：屏幕录制无法捕捉到闪烁，手动录制了两种状态的动画视频：正常动画、2秒慢放动画。

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