Open jessecoleman opened 1 week ago
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.
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
Severity
blocking an upgrade