list with inert elements at the end causes item to be added out of order

[0Abdullah]

Describe the bug

adding an item to a list that contains "inert" elements pushes the DOM element after the final non-inert element, it does not push it to the end of the list, this only affects lists that contain inert items at the end.

is this expected behaviour?

Reproduction

https://svelte.dev/playground/hello-world?version=5.2.10#H4sIAAAAAAAACm2SYW-bMBCG_8rNmxRSUSBtmiYUIu3jPuwXNP3g4GOxZmxkH-0qxH-fDo9W6yYkkA6_z_ve-UZhZYeiFNqiJ3ADXbv22nmFHjz23olUtNpgEOXjKOi157NcEOmi_Nr3WXhGQ1w7y4D_qzfOEloKohRVaLzu6XiyJ8qv-M0PueinhgbLpXgNjdHNT0g8du4Z1-As0AWh1VYa0IRd9n705aINgibQAchLGzRpZ7X9wV2lC0kqtT7ZqGIUQ-BFGwNnBKkUKjhj6zzORtJ4lOr1A4816YLQAaQJDi6y79EG0C0rPYL0CN1gSPccax4vCwNImtloVQZMucpnlj2R7nrnCUYIRitMoZUKYYLWuw5WcZb5e5TVA2sMLtwavgSShMkjFNlmt9vst5vi_u7-fl9sb29TKLKbu8N-u9vuNofDfnu42aWwipOFDlfwtH6Ik2kH27ABz-MbYZesYYztzkZZP4RL8l3SJfPSKtcl61lJ0wd5ZM8EFv5NgTrGzlptCH2ioT7G2_hU16DfiFX-ti-V0s_8OQ9EzoKz853W45-Y0_GrUlUe_87rVQ3mGC3Hzyiby3IBIRrFVNOyQpXRvColT70eR1CDl9xHCXdFUcA0HUcWTPBPgGTN4T-2Ox1j5S1SlRu95Mk5z2xd5XPKKo_d8SNSQfiLREl-wOlp-g2SbBsFpgMAAA==

Logs

No response

System Info

irrelevant

Severity

annoyance

[webJose]

Define "inert item". If you mean "item in the process of being removed", then the demo looks OK to me. Just because it takes a long time to disappear, doesn't mean that it is gone already, data-wise. From the data perspective, the elimination is instantaneous, and its corresponding HTML is probably not tracked anymore.

[0Abdullah]

Define "inert item". If you mean "item in the process of being removed"

Correct, that's what I mean. it's an item that is tagged as "inert" in the DOM, it's an implementation detail of the Svelte transitions.

then the demo looks OK to me. Just because it takes a long time to disappear, doesn't mean that it is gone already, data-wise. From the data perspective, the elimination is instantaneous, and its corresponding HTML is probably not tracked anymore.

But from a visual prespective it looks jarring, I came across it when designing a chat overlay where messages get removed after a certain point, so sometimes a message would come in while the final message is being faded out and it would it be added above the fading out message then when that message is done fading out this new one would instantly jump to the bottom.

video demonstration:
https://github.com/user-attachments/assets/86bff84f-7553-44cf-8584-a7666e4f7413

[dummdidumm]

Not sure if we can or should change this - it probably highly depends on the use case whether or not this behavior is wanted.

[gyzerok]

Not sure if we can or should change this - it probably highly depends on the use case whether or not this behavior is wanted.

Personally I'd expect .push to always place an element in the end (visually and on the data side) regardless of the use-case or animation implementation details.

Maybe that's a place where svelte as per it's tenets should strive for DX and being magical, not magic?