Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Transition> retains detached DOM nodes that already left #11782

Closed
ktsn opened this issue Sep 3, 2024 · 3 comments · Fixed by #11788
Closed

<Transition> retains detached DOM nodes that already left #11782

ktsn opened this issue Sep 3, 2024 · 3 comments · Fixed by #11788
Labels
🐞 bug Something isn't working scope: transition

Comments

@ktsn
Copy link
Member

ktsn commented Sep 3, 2024

Vue version

52cdb0f

Link to minimal reproduction

https://play.vuejs.org/#eNp9UTtPwzAQ/iuHl4JUmgGmKq14qAMMgCCjl5BeglvHtvwIlar8d85OU4qEmsn+XvnuvGf3xsy6gGzOcldZYTw49MEsuRKt0dbDHizW0ENtdQsTkk644qrSynnoShkQFlFx6W3AK67ybIihALp4bI0sPdINIP8M3msFd5UU1XbB2Wi/SAfOloVuGol5NghTBNkKWyonvEgI0JevRQfdtajHDLIODECBzh9UGcmGH2d/IvLspBabMu9omlo0s43Tihaxjx7OKt0aIdG+muhznM0hMZErpdTfzwmLc09HvPrCavsPvnG7iHH2ZtGh7ajxkfOlbdAP9OrjBXd0PpKtXgdJ6jPkOzotQ+w4yB6CWlPtE11q+5SeU6imcKudR1rHYahYNCr7pKeNBnw8M/pv3ZvZbfJx1bP+Bx9owfc=

Steps to reproduce

  1. (On Chrome devtools) Trigger GC and take initial heap snapshot.
  2. Click "Toggle" button twice (Text disappears and appears again)
  3. (On Chrome devtools) Trigger GC again and take second heap snapshot.
  4. Compare 3. and 1.

What is expected?

There is no detached DOM node.

What is actually happening?

There are detached DOM nodes that disappeared on step 2. It is retained by the old vnode in the scope of <Transition> render function via postClone callback of resolveTransitionHooks.

スクリーンショット 2024-09-03 9 50 51

System Info

No response

Any additional comments?

The detached nodes will be released when a next leave transition. So memory usage does not increase forever. But this behavior always keep some detached nodes which makes harder to find actual memory leak. In addition, since it keeps unused DOM tree in memory, it can be a problem under an environment where memory usage is restricted like mobile app's WebView.

@Xiaofusun
Copy link

chunk-FAED3IGF.js?v=cd150bc5:9710 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
at nextSibling (chunk-FAED3IGF.js?v=cd150bc5:9710:31)
at removeFragment (chunk-FAED3IGF.js?v=cd150bc5:7224:14)
at remove2 (chunk-FAED3IGF.js?v=cd150bc5:7195:9)
at unmount (chunk-FAED3IGF.js?v=cd150bc5:7173:9)
at patch (chunk-FAED3IGF.js?v=cd150bc5:5905:7)
at patchBlockChildren (chunk-FAED3IGF.js?v=cd150bc5:6341:7)
at processFragment (chunk-FAED3IGF.js?v=cd150bc5:6433:9)
at patch (chunk-FAED3IGF.js?v=cd150bc5:5928:9)
at patchBlockChildren (chunk-FAED3IGF.js?v=cd150bc5:6341:7)
at patchElement (chunk-FAED3IGF.js?v=cd150bc5:6233:7)

@edison1105
Copy link
Member

@Xiaofusun
Please create a new issue with minimal reproduction

@Xiaofusun
Copy link

Xiaofusun commented Sep 3, 2024 via email

@github-actions github-actions bot locked and limited conversation to collaborators Sep 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: transition
Projects
None yet
3 participants