ViewTransitions memory leak - Svelte components and Image

jerzakm commented 1 year ago

Astro Info

Astro                    v3.0.12
Node                     v19.7.0
System                   Windows (x64)/ linux / MacOS
Package Manager          npm
Output                   static
Adapter                  none
Integrations             auto-import
                         @astrojs/tailwind
                         @astrojs/svelte
                         @astrojs/mdx
                         @astrojs/preact

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

This is a continuation of https://github.com/withastro/astro/issues/8435 . I reported the bug a few days ago and initially it seemed that @natemoo-re 's PR fixed it (https://github.com/withastro/astro/pull/8448) but the issue still persists.

Reproduction is still this PR https://github.com/threlte/threlte/pull/601 . Astro is in apps/docs.

We added routes /test/a and /test/b with links "NAVIGATE TO: B" to quickly go between them and spawn tens of thousands of DOM nodes.

Url to live preview of repro: https://threlte-7ej474mrl-threlte.vercel.app/test/a

Our repro is a page based on MainLayout.astro and making changes there we got it 'fixed' a few times but it was very unreliable. We tried for several hours and weren't able to pinpoint what the exact problem is we found a few fickle "fixes". Here are a few things that changed how the leak behaved and what "fixed" it sometimes:

changing or removing client:* directive on svelte component - most reliable
there were some odd interactions with the astro's <Image/> component and sometimes those had to be removed off of the page
putting Astro component in svelte named slots had impact at times

This was also difficult to reproduce in Windows, but happened reliably on Linux/MacOS (different dependency version for windows of something like sharp, turbo etc then?).

I think the main issue is the client:load etc directives, and other weird behaviour is a side product.

What's the expected result?

DOM nodes get removed/GC after navigation

Link to Minimal Reproducible Example

https://github.com/threlte/threlte/pull/601

Participation

[ ] I am willing to submit a pull request for this issue.

matthewp commented 1 year ago

I have a reduced example now. I can recreate this with a minimal document. It is either something leaking in the ViewTransitions component's script, or a leak in Chrome.

jerzakm commented 12 months ago

I have a reduced example now. I can recreate this with a minimal document. It is either something leaking in the ViewTransitions component's script, or a leak in Chrome.

Have you had any chance to have a look if this was an astro or a Chrome issue? We miss our transitions :) I'm not very familiar with astro internals but I'm happy to provide any help needed to move this forward, if you can point me in the right direction.

ematipico commented 8 months ago

@matthewp @martrapp do you have any hints on how to fix the issue?

martrapp commented 8 months ago

@matthewp @martrapp do you have any hints on how to fix the issue?

I have tried for a while but was not able to reproduce it.

withastro / astro