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?

[mcullifer]

@trueadm Uh I can try. Currently I'm using DaisyUI so a ton of my css classes have animations of some sort.

UPDATE:
After removing daisyui from the project This does seem to dramatically reduce the number of detached divs. There are some remaining and they are growing in count and I believe it's related to native tailwind animations such as animate-pulse. So I think you're right that somehow this is tied back to css animations

This is what the perf monitor looks like just doing ⬅ ➡ browser navigation over and over.

[gyzerok]

I think this might be a (reverse) Heisenbug.

Wondering though why it's happening in both Chrome and Safari.

@mcullifer It looks like CSSAnimation is retaining the element somehow.

Yeah, that's the same problem I am seeing when doing snapshots in my project - entire subtrees being retained by CSSAnimation. Though we are not using any external libraries or tailwind, just plain style tags.

[gyzerok]

@trueadm copied spinner piece into the REPL. Does this help somehow?

[gyzerok]

I've experimented a bit and discovered that the issue here is indeed fade transition from svelte (this REPL).

1. If I remove in:fade but keep CSS animation - nothing leaks
2. If both fade and CSS animation are present then it leaks and retainer is "CSS Animation"
3. However if you comment css animation in styles, but keep fade, then memory is also leaking, but retainer is "Keyframe Effect"

Which drives me to conclusion that fade transition is responsible somehow for the leak here. Maybe there is some additional cleanup, that could be done inside svelte transitions?

[mcullifer]

@gyzerok Interesting, did you only find this to be the case with fade? That would be very curious because out of all the transitions fade seems to be the most simple

svelte/packages/svelte/src/transition/index.js

Lines 62 to 70 in b0c4fa5

	export function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
	const o = +getComputedStyle(node).opacity;
	return {
	delay,
	duration,
	easing,
	css: (t) => `opacity: ${t * o}`
	};
	}

and nothing seems obvious from it's code. The only thing is the +getComputedStyle, I've never seen the + syntax so not sure what that is?

EDIT: I guess it's the Unary + Operator

[gyzerok]

@mcullifer this (and other) function is just generating styles for each transition step. The real code that runs transitions is located in transitions.js file.