bug: chrome, complex selector causing elements to not get garbage collected

[joewoodhouse]

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

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

When a controller modal is dismissed, it's contents are detached from the DOM but are unable to me garbage collected. This represents a resource leak, and repeated opening/closing of a modal like this will eventually lead to the app being killed by the operating system.

Expected Behavior

When a modal is dismissed, all resources associated it should be freed.

Steps to Reproduce

1. Go to the documentation page for controller modals:
   https://ionicframework.com/docs/usage/v6/modal/controller/demo.html?ionic:mode=ios
2. Open Chrome Devtools "Performance Monitor" tab
3. Take a Heap Snapshot (Memory > Record button)
4. Repeatedly open and close the modal
5. Watch the Performance Monitor tab's "DOM Nodes" number increase indefinitely
6. Force manual GC (trash icon in the Memory tab) - note the DOM nodes do not reduce
7. Take another Heap Snapshot and compare. You will see 100s of Detached Elements

A video of me doing these steps:
https://drive.google.com/file/d/1ciQxC1xSa_aiyrA2OfEIJCjXHJH_sBhx/view?usp=sharing

Code Reproduction URL

https://ionicframework.com/docs/usage/v6/modal/controller/demo.html?ionic:mode=ios

Ionic Info

Ionic:

Ionic CLI : 6.20.6 (/Users/joewoodhouse/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v16.14.2 (/Users/joewoodhouse/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.7.0
OS : macOS

Additional Information

I believe these issues are probably related to an underlying Stencil problem, but I haven't been able to track it down. As part of my investigation I've found other issues in stencil namely
stenciljs/core#4070
stenciljs/core#4067

There are known issues around how Stencils runtime and VDOM implementation hold strong (rather than weak) references to DOM nodes that are probably also contributing to this issue.

Whilst obviously for a documentation website this isn't a problem, for us this represents a major problem as we have a mobile application that displays 100s of modals during the course of the apps lifetime. This bug means that are users regularly experience crashes after a moderate amount of use, simply because the operating system kills the WebView due to it using too many resources. Using inline modals could be an option for us but it would require a major refactor.

[liamdebeasi]

Thanks for the report. I can reproduce this behavior, but I am still digging into the source of the issue. I'll update here when I have more information.

[joewoodhouse]

Thanks @liamdebeasi. I've spent a lot of hours looking at this for the last week or so, if you'd like to chat about it in person let me know.

[liamdebeasi]

This appears to be a Chromium bug. All overlays receive an overlay-hidden class that is later removed on presentation. This lets us append elements to the DOM while avoiding a flicker. We also have a selector that prevents backdrops from stacking when multiple modals are open:

ionic-framework/core/src/css/core.scss

Line 95 in 6dcd98b

ion-modal.modal-default:not(.overlay-hidden) ~ ion-modal.modal-default {

(i.e. the backdrop does not appear to get darker every time you open a modal).

This complex selector seems to be causing the issue. Removing it causes the issue to no longer reproduce. I was able to reproduce this behavior outside of Ionic, and I have reported this issue to the Chromium team: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768

I will see if there is an alternative implementation for the selector above.

[joewoodhouse]

Hi @liamdebeasi

If I go the reproduction URL (https://ionicframework.com/docs/usage/v6/modal/controller/demo.html?ionic:mode=ios) and remove the Ionic CSS element from the page, and then run the same steps, exactly the same behaviour still happens for me?

I'm also not convinced this can just be a Chromium bug as I can reproduce this easily in Safari as well?