ionic-team
bug: light dom custom element with comment node causes retainer
Prerequisites
- [X] I have read the Contributing Guidelines.
- [X] I agree to follow the Code of Conduct.
- [X] 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
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?
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.
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.
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.
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.
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.
When I was trying to find what is causing the issue, I noticed that one of the sources is ion-footer component. When I removed it from the template, the leaks stopped for some pages. Sadly it is not the only issue because for other pages it is still happening even tho they dont have ion-footer. This might at least give you a hint what to look at. To reproduce it, simply create new ionic project with tabs template and add routed component to the global outlet (outside of the tabs) and add ion-footer.
As I noted in https://github.com/ionic-team/ionic-framework/issues/28189#issuecomment-1724045731, a runnable sample would be really helpful. I want to make sure I am reproducing the correct issues.
I'm not able to reproduce any leaks:
Here is a video of me performing the steps to reproduce:
https://github.com/ionic-team/ionic-framework/assets/2721089/eb1091b5-7a3a-46fb-84e6-8d5efec123d4
Well, this is how it looks on my side. The same repository. What am I missing?
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
Do you have an example of this happening in Firefox? (i.e. the heap snapshot)
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.
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.
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.
Great, I got rid of the footer because of this. looking forward to a fix. Thanks
Can you give this a try in Ionic 7.7.0? The underlying Stencil bug should have been resolved in Stencil 4.11.0.
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.
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.
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?
The issues that are potentially related are https://github.com/ionic-team/stencil/issues/5181 and https://github.com/ionic-team/stencil/issues/5172. The Stencil team is still investigating these issues.