bug: Memory leak with detached DOM nodes leading to infinite growth

[ralphcode]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Navigating between pages in an Ionic + Angular application leads to a steadily increasing DOM node count. Over time, this can balloon to tens of thousands of detached DOM nodes (verified via Chrome DevTools), causing performance degradation and application crashes.

Expected Behavior

When a component or page is destroyed/navigated away from, its DOM elements should be properly removed from memory. The DOM node count should not grow indefinitely, ensuring stable performance over time.

Steps to Reproduce

1. Clone code reproduction URL + npm install + npm start
2. Open Chrome DevTools → Performance & Memory tab.
3. Repeatedly navigate next, then back to root. Each will load 5000 nodes.
4. Note, ngOnDestroy successfully executes
5. Observe the DOM node count growing with each navigation in the Performance Monitor, and detached DOM nodes in the Memory tab snapshots. Forcing Garbage collection has no effect.
6. Snapshotting at root, and then again at root after navigation shows Detached <div> of the exact count with set Objects allocated between Snapshot X and Snapshot X

Screen.Recording.2025-02-26.at.9.40.18.am.mov

Code Reproduction URL

https://github.com/ralphcode/capacitor-angular-dom-leak

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.0
   Ionic Framework               : @ionic/angular 8.5.0
   @angular-devkit/build-angular : 18.2.14
   @angular-devkit/schematics    : 18.2.14
   @angular/cli                  : 18.2.14
   @ionic/angular-toolkit        : 12.1.1

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 2.0.1) : 1.4.0

System:

   NodeJS : v18.20.3
   npm    : 10.7.0
   OS     : macOS Unknown

Additional Information

Possibly related to: #30132 (specifically Resolved performance issues due to detached nodes in memory) and here within Stencil/Core: stenciljs/core#6210

If you need anything further, please let me know

[ralphcode]

Fyi, this memory leak is still present in 8.5.1

[KeyTurns]

They must fix this asap, the users are getting warnings from the browser because of to much RAM usage!

[Noaber]

Any updates ? @brandyscarney ?

[ShaneK]

Hello! I believe what you're seeing is an issue with Chrome's dev tools where having them open while doing tasks will keep nodes attached and then they'll show up as detached nodes. Please try to repeat your experience with dev tools closed, then open them and look for detached nodes. If you can reproduce them growing infinitely without dev tools open while navigating the page, then it is a bug.

[ShaneK]

For reference, I believe the issue with the performance monitor isn't really any issue, it's just how the performance monitor grabs and holds on to references. Here's it being pointed out in another bug report in React. (Related Chromium bug report)

The other issue with detached nodes may be related to this recently closed issue in Chromium, but I won't be sure until that gets into mainstream Chrome.

[ralphcode]

Hey @ShaneK thanks for the input. The Chrome report claims this was fixed in v136.0.7102.0 but I've tested this in Version v137.0.7123.0 (Official Build) canary (arm64) and the exact same problem with Angular Ionic on the above reproduction repo:

[ralphcode]

@ShaneK I've also tested 8.5.4-dev.11744209290.123af9eb (#30132) with Chrome Version 137.0.7123.0 (Official Build) canary (arm64) and the same issue.

[ShaneK]

@ralphcode That may be the case, I wasn't sure if that bug report would resolve this particular issue or not - it was the closest I could find. However, without being able to replicate this issue of detached nodes without Chrome dev tools being open - which I cannot - then this is not a bug in Ionic Framework. It's just a quirk of Chrome dev tools capturing node references while it's open.

Screenshot-2025-04-15.at.06.25.46.mp4

I'm not saying there's not a memory leak in your app - there may be - but this Chrome dev tools issue will make it difficult to find. All I can say is I've done extensive testing around reported memory leaks that have been based around this same issue with Chrome over the last 2 weeks and they all end up leading back to Chrome's internal tooling being the reference holders.

There are actually two cases I know of in Ionic Framework that do create real actual detached nodes that can be verified in this way, but they do not create them endlessly and are not actually memory leaks because of that. They're just DOM elements that need to be removed and so are detached. We may address how these work in the future, but for now, they're not a priority because they're not actually causing leaks.

[ralphcode]

Thanks for the follow-up. That makes sense. I'll do some tests in Xcode Instruments to double-check actual memory usage at the OS level and see if it keeps growing or stabilizes. It won't show the same DOM node details as Chrome dev tools, but with this example the memory footprint should balloon there, if not it's likely just the tooling reference issue you suspect rather than a true leak.

I'm under the pump at the moment, so I'll try to run those diagnostics soon and let you know what I find. Really appreciate your help.