bug: light dom custom element with comment node causes retainer

[terslada]

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

v7.x

Current Behavior

When navigating between pages that should not be reused, there are leaks in both nodes and listeners, which makes the application unusable after a while.

Expected Behavior

Pages should be disposed correctly

Steps to Reproduce

Reproducible even inside your ionic conference app example. Simply navigate between schedule and support pages and watch the performance monitor.

Code Reproduction URL

https://github.com/ionic-team/ionic-conference-app

Ionic Info

• ionic info from conference app

Ionic:

Ionic CLI : 6.19.0
Ionic Framework : not installed
@angular-devkit/build-angular : 16.0.0
@angular-devkit/schematics : 16.0.0
@angular/cli : 16.0.0
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v18.16.1 (C:\Program Files\nodejs\node.exe)
npm : 9.7.2
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the report. I can reproduce this on the latest version of Ionic, but I need to take a closer look to understand why this is happening.

Is this happening in an app you are building?

[terslada]

Yes, it does.

[liamdebeasi]

Do you have a minimal reproduction of the issue happening in that app?

[terslada]

It is a production application that I can not really share, but It happens consistently every time I close a page that should be destroyed. Same as in the example app.

[liamdebeasi]

Any minimal reproduction you can provide will make it easier for us to diagnose and potentially fix the issue. Otherwise, I'll keep working through the conference app. However, it is a big app so it will likely delay any results.

[terslada]

Tried to recreate the behavior on a new app, but no luck there. My application is pretty similar to the conference app, but couldnt figure out what is the root cause.

[liamdebeasi]

It might be best to start with your production application since you know the bug reproduces there. Then you can start removing code until you have a minimal working example. There does seem to be an issue in the Ionic conference app, but at the moment I have no way of knowing if this is the same bug that is impacting your app.

[terslada]

My application is bigger then the conference one, but I will give it a try once I have time for it... I would be very surprised if it were two different bugs though.

[liamdebeasi]

I'm not able to reproduce any leaks:

Here is a video of me performing the steps to reproduce:

repro.mov

[terslada]

Well, this is how it looks on my side. The same repository. What am I missing?

screen-capture.1.webm

[liamdebeasi]

What version of Chrome are you using? I'm on 117.0.5938.92.

[terslada]

117.0.5938.132

Tested it also in Firefox and also on different PC. All results the same.

How come that even the heap size is so much different on the first snapshot I wonder

[liamdebeasi]

Do you have an example of this happening in Firefox? (i.e. the heap snapshot)

[terslada]

Not rly familiar with Firefox devtools. But this is how it looks. Could not find GC trigger, but hopefully it runs automatically before heap snapshot as in chrome.

screen-capture.2.webm

[terslada]

Got some interesting findings now.

Chrome behavior:

• every time I navigate to the page and back, there are more and more nodes leaked.

Firefox behavior:

• first time I navigate to the page and back, the same nodes are leaked. But with each consequent navigation, there are no more leaked nodes.

If I remove the footer component that I mentioned before, the Chrome starts to behave same way as Firefox. Leaking only for the first time and stay consistent after.

[liamdebeasi]

Hey there! Apologies for the delay. I can confirm that certain components are being retained in memory when they should not be. I was able to determine that ion-footer is being retained by the comment node inside of it. Stencil renders this comment node for Light DOM components that use <slot></slot>. I've sent this over to the Stencil team to take a closer look at. I'll follow up here when I have more to share.

[terslada]

Great, I got rid of the footer because of this. looking forward to a fix.
Thanks

[terslada]

Any news on this?

[liamdebeasi]

Can you give this a try in Ionic 7.7.0? The underlying Stencil bug should have been resolved in Stencil 4.11.0.

[terslada]

Sadly still behaves the same way

[liamdebeasi]

Thanks for testing. I spoke with the Stencil team, and it sounds like there may be multiple bugs in Stencil that need resolving. I'll work with them to see if we can find a good resolution here.

[terslada]

Lately I look a bit into the memory leaks again. There are leaks everywhere caused by using ionic components. I dont rly know what to do, because the application gets unusable after a while. It is ment to be running for many hours, but now it has to be restarted often to be usable.

[aeharding]

Thanks for testing. I spoke with the Stencil team, and it sounds like there may be multiple bugs in Stencil that need resolving. I'll work with them to see if we can find a good resolution here.

@liamdebeasi, are there Github issues for these Stencil bugs?

[liamdebeasi]

The issues that are potentially related are ionic-team/stencil#5181 and ionic-team/stencil#5172. The Stencil team is still investigating these issues.