Svelte 5: Crossfade animation timing

[jessecoleman]

Describe the bug

This seems to be a regression in svelte 5, when adding a crossfade send/receive to an array of elements, and then staggering their delay, the transitions don't start at exactly the specified time. This is more pronounced on slower devices, and in extreme cases there's an additional issue where the first frame of the CSS animation flashes at the very end again.

First example (Google Pixel 5, chrome):
https://github.com/user-attachments/assets/66e41221-fa65-4c05-9b9a-1f1c23b94b0e

if you pause it mid-transition, the blocks should all be lined up diagonally, but instead they are slightly offset. (I'm using linear easing here to make the issue clear)

Second example (iPhone 6s, safari):
https://github.com/user-attachments/assets/6f0df79d-5945-4dc6-a3c0-14b74e996d4a

In this case the issue is very apparent, and this is the more critical issue blocking my migration. I can live with slight timing issues.

Reproduction

https://github.com/jessecoleman/svelte-5-flip/tree/crossfade

Logs

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 9.11 GB / 15.31 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 8.15.5 - ~/.local/share/pnpm/pnpm

Severity

blocking an upgrade

[jessecoleman]

My workaround here was to bake the delay into the css animation, since I already have a custom crossfade function. Would be nice to have a framework-level solution, but I can live with it for now. The issue with the 1st frame flash at the end of the animation is still present on older devices, so I won't close this issue.