Svelte 5: Crossfade playing fallback consistently in some scenarios

[Draconizations]

Describe the bug

The crossfade transition will play the fallback animation in some scenarios, when using svelte 5. There seems to be some pattern to this, but I haven't figured it out entirely.

It looks like (to me) it has something to do with the order of which the parent elements are in the DOM. Reordering these elements changes the behavior as well. I have provided some more details in the REPL.

Reproduction

I initially ran into this in a sveltekit project using svelte 5. The outer elements are an array of objects with their inner elements as an array within.

This is a REPL that reproduces the exact setup I have there as closely as possible. I am not able to provide a svelte 4 REPL at this moment, but I can later if there's a need for it.

Logs

No response

System Info

System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1
    Memory: 104.44 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.5.1/bin/yarn
    npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
    pnpm: 8.15.6 - ~/.nvm/versions/node/v20.5.1/bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
  Browsers:
    Safari: 17.0

Severity

annoyance

[jakobpesch]

I stumbled upon this too.

Here is a simpler REPL in Svelte 4 and Svelte 5 using the exact code (so no runes).

What's interesting is that the "receiver" that appears first in the DOM sends the items without the animation. You can observe this when you swap the order in the DOM (Team A after Team B from the REPL).

[Draconizations]

I stumbled upon this too. What's interesting is that the "receiver" that appears first in the DOM sends the items without the animation. You can observe this when you swap the order in the DOM (Team A after Team B from the REPL).

Thanks for the simpler REPL with a svelte 4 comparison. I didn't have the time to make one yesterday, so this is much appreciated

[lettucebowler]

I created some repls to file this issue myself, but since it's already been created I guess I will leave them here to see if they are helpful at all: svelte 4 svelte 5 (no runes) svelte 5 (runes)

I've noticed that transitions from left-to-right (forward in the dom order) do not play the animation unless I am able to click the button to trigger that transition while a right-to-left (backwards in dom order) transition is happening.

example: quickly cycle between clicking 1 and 2 -> animation plays in both directions. click 1, wait for transition to finish, then click 2 -> animation only plays in 1 direction.

[lettucebowler]

This seems to have been fixed as part of the 5.0.0-next.153 release. The above repl links seem to work now based on my testing. I think 11960 is likely what fixed this.

[Draconizations]

This seems to have been fixed as part of the 5.0.0-next.153 release. The above repl links seem to work now based on my testing. I think 11960 is likely what fixed this.

I can confirm the same, plus it working in my main project as well now. I'll leave the issue open in case a maintainer needs to confirm it as well, though.