memory leak: detached nodes are kept when using transitions

[gyzerok]

Describe the bug

When using transitions something isn't cleaned up properly resulting in detached nodes memory leak.

This was already fixed once in #12719, so seems to be a regression due to some changes. I am wondering if it's even possible to have a test or something for it to prevent future regressions.

Reproduction

REPL

1. Take snapshot
2. Click button multiple times
3. Take snapshot again
4. Repeat and observe h1 leaking

Logs

System Info

Chrome 132.0.6834.160 (Official Build) (arm64)
Svelte 5.19.7

Severity

annoyance

[brunnerh]

This does not reproduce for me, at most singular elements are detached and nothing changes in regards to elements in subsequent snapshots.

Do you have some extension that maybe is messing with the DOM?
(E.g. those relating to translations can do that.)

[gyzerok]

@brunnerh not using chrome as my daily driver, so it's just a clean installation without any extensions. Are you sure you are taking snapshot of the right VM instance inside devtools? For me it's a common mistake to forget to record the correct one when doing it inside playground :)

[brunnerh]

Yes, I remembered that pitfall and made sure to avoid it (this time).

[gyzerok]

I also see retainer to be connected to animation

[gyzerok]

@brunnerh for me amount of detached nodes directly corresponds to the number of clicks I am doing

[gyzerok]

Also can confirm that if I remove in:fade transition than nothing leaks for me

[brunnerh]

So, given that you said that it could not be extensions, I thought "surely it's not the browser, right?" because mine was a bit out of date. Updated it and checked again...

Old Version: 131.0.6778.265
New Version: 132.0.6834.160

Thanks, Chrome 👍

[gyzerok]

@brunnerh looks like the same problem is in Safari as well

[trueadm]

I'm not sure what has changed, if anything? Looking at the history of transitions.js, the only changes that have happened don't seem to cause anything relating to this. I can't think as to why the Animation is retaining the DOM node here.

[brunnerh]

I think this might be a (reverse) Heisenbug.

Thesis being that something in the dev tools keeps objects alive.
When I closed the dev tools and made a new "detached elements" snapshot, all detached <h1> were gone.

With tools open:

After close & re-open:

[mcullifer]

I'm noticing the same issue, except I don't really use transitions that much so I don't think it's that. But I cannot figure out for the life of me what is happening. I'm getting thousands of detached divs when navigating between different routes that never go away and accumulate over time.

[trueadm]

@mcullifer Without any form of reproduction, or screenshots of the memory profile, it's really hard for us to investigate.

[mcullifer]

@trueadm Yep totally understand. Looking through all of these divs the only pattern I think I'm seeing is maybe events? Like onclicks and stuff where I tend to do onclick={() => whatever()} with anonymous functions and could be capturing global this over and over? I keep seeing the "globalThis", but I also have no idea what I'm talking about when it comes to this stuff. I've even read just having dev tools open will hold references to all the divs. So it's really unclear to me what's real and what isn't haha, but I'll keep investigating. All I know is there's a memory leak happening somewhere either in svelte or one of the libraries I'm using or something I am doing.

[trueadm]

@mcullifer It looks like CSSAnimation is retaining the element somehow. If you remove the CSS animation, does it go away?