Svelte 4: elements inside {#each} with "out:" transition get stuck in DOM during changes to store used by {#each}

[DanielSidhion]

Describe the bug

Elements with transitions are getting stuck in the DOM. They remain in the DOM with the inert="" attribute and are never removed once they get into this state.
Based on my experiments (and the linked reproduction), the following conditions seem required for the issue to happen:

• An {#each} block that depends on the value of a store.
• Children inside {#each} need an out: transition, even if its duration is 0.
• Changes to the store are made with one tick() of delay in them (if all the changes are made immediately, no elements get stuck).

The most relevant workaround I found (which is included in the reproduction link in commented code) is to wait at least 3 frames (assuming the transition duration is 0, but possibly more frames if the duration is longer) after changing a store to ensure that Svelte will properly deal with all DOM elements with transitions before the next change is made in the store.

This seemed related to #8351, but I decided to open a new issue because this is for an {#each} block instead of an {#if} whose condition never changes value.

Reproduction

https://svelte.dev/repl/aa4fa02209e247e99e48d320357ac00a?version=4.2.19

Logs

No relevant browser console logs.

System Info

(Both the `System` and `Browsers` output was wrong after running this, so I removed them. Bug reproduced on Firefox 127.0.2)


  Binaries:
    Node: 22.4.1 - /nix/store/w8rva81863ls2ic3qc72mdzpzm0skyrm-nodejs-22.4.1/bin/node
    npm: 10.8.1 - /nix/store/w8rva81863ls2ic3qc72mdzpzm0skyrm-nodejs-22.4.1/bin/npm
  npmPackages:
    svelte: ^4.2.7 => 4.2.19 

Severity

annoyance

[dummdidumm]

Fixed in Svelte 5