Crossfade transitions not smooth

[hanielu]

Describe the bug

Triggering a crossfade in quick succession causes the element being animated to instantly snap to their new position and not animate in.
This isn't the case with framer-motion's layout transitions, and wasn't the case in older versions of svelte (svelte 4)

Svelte 5:

CleanShot_2025-04-30_at_1_.30.20.mp4

Svelte 4:

CleanShot.2025-05-01.at.2.09.36.mp4

Reproduction

Svelte 5

Svelte 4

Logs

System Info

REPL - Svelte v5.28.2
Tested in Arc Browser
macOS 15.4.1

Severity

annoyance

[seantiz]

Possibly related are #15828 and #14732 but I've only tested specifically with crossfade() so I'm posting here.

I can only replicate this bug in a Chromium environment with Playwright and it's happened since moving to svelte/transition passing keyframe objects to the Web Animations API in Svelte 5.

Though I'm not blaming WAAPI or the move to implement it at all because it's a good move.

As was said the bug is: The browser renders the final target animation state first before anything (this doesn't happen in a mock environment like Vitest - only in a Chromium browser so far on my end).

I think this happens while svelte/transition is making the dummy delay object but that's as far as I've gotten to narrowing this down.