bug: During the page change animation on IOS, memory usage increases 4-5 times

[loremru]

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

During the page change animation on IOS, memory usage increases 4-5 times You could see it in Safari Devtools in Layers tab

When memory take more than 500-600 mb, app can crash or reload page

Expected Behavior

Normal animation -_-

Steps to Reproduce

1. Open on your iphone ionic app
2. Connect by usbc and enable web debug in safari
3. Inspect your app via safari develop
4. Layers tab

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/loremru/.nvm/versions/node/v18.16.0/lib/node_modules/@ionic/cli)

Capacitor:

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

Utility:

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

System:

NodeJS : v18.16.0 (/Users/loremru/.nvm/versions/node/v18.16.0/bin/node) npm : 9.5.1 OS : macOS Unknown

Additional Information

I know that loads two pages. But when animation starts memory increase sharply for few ms, an then returns to normal for 2 pages.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[capc0]

We are also experiencing this issue resulting in crashes of the WebView and restarts of the app.

This might be related to this issue https://github.com/ionic-team/ionic-framework/issues/25760

When the crash occurs after/during the page change animation, the following is logged in the Xcode console:

0x115018680 - [PID=545] WebProcessProxy::didClose: (web process 0 crash)
0x115018680 - [PID=545] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=Crash
0x115020660 - ProcessAssertion: Failed to acquire RBS Background assertion 'XPCConnectionTerminationWatchdog' for process because PID 0 is invalid
0x115020660 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'XPCConnectionTerminationWatchdog' for process with PID=0, error: (null)
0x107038c18 - [pageProxyID=7, webPageID=8, PID=545] WebPageProxy::processDidTerminate: (pid 545), reason=Crash
0x107038c18 - [pageProxyID=7, webPageID=8, PID=545] WebPageProxy::dispatchProcessDidTerminate: reason=Crash
0x116000dc0 - GPUProcessProxy::gpuProcessExited: reason=IdleExit
0x1150180c0 - [PID=0] WebProcessProxy::gpuProcessExited: reason=IdleExit

Crash is only semi-reproducible - after about 20 navigations forward and backward, it appears. After it crashed and reloaded the WebView once, it crashes every 2nd or 3rd try again.

Is there any more information we can provide in order to assist resolving this issue?

---

• iOS 17.2 (12C62)

Ionic:

   Ionic CLI                     : 7.1.5
   Ionic Framework               : @ionic/angular 7.5.0
   @angular-devkit/build-angular : 15.2.10
   @angular-devkit/schematics    : 15.2.10
   @angular/cli                  : 15.2.10
   @ionic/angular-toolkit        : 10.0.0

Cordova:

   Cordova CLI       : 11.1.0
   Cordova Platforms : ios 6.3.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 27 other plugins)

Utility:

   cordova-res                          : not installed globally
   native-run (update available: 2.0.0) : 1.7.3

System:

   ios-deploy : 1.12.2
   ios-sim    : 8.0.2
   NodeJS     : v18.16.0 (/Users/simonhagemann/.nvm/versions/node/v18.16.0/bin/node)
   npm        : 9.5.1
   OS         : macOS
   Xcode      : Xcode 15.1 Build version 15C65

---

I was not able to reproduce this on iOS 16.6

[averyjohnston]

We will need a code reproduction before we can uncover the root cause behind the issue, as described in https://github.com/ionic-team/ionic-framework/issues/28660#issuecomment-1845449627.

[loremru]

If someone have same issue, as a workaround you can set animation to md at ion-router-outlet. And it will be fine. Also some of your pages could require a lot of memory. So if there a lot of videos on page (like a feed) your WebView will crash 💀. I think there isn't a way to solve it even with virtual scroll :(

[capc0]

I spent the entire day trying to get a stable reproduction of this issue. Unfortunately I did not manage to do this from a clean project.

However, here is a simple project that might already be sufficient to have a first look https://github.com/capc0/ionic-webview-crash It is based on the tabs starter template and renders 500 cards. A click on any of these cards will navigate to a nested page. The navigation sometimes gets stuck and freezes the UI for about 15 seconds.

In our production app we are able to reproduce this right after the app starts by spamming multiple clicks on an ion-card that triggers navigation (similar to the example above). So this is not some issue that happens after using the app for a few hours - the crash can appear instantly.

[capc0]

This issue disappears once

• animations are disabled IonicModule.forRoot({ animated: false })
• or the amount of rendered content/ion-cards is reduced

[liamdebeasi]

I can reproduce the reported behavior. However, this does not appear to be an Ionic bug. When doing an accelerated animation, WebKit promotes each element to its own layer. This consumes additional memory, and if too many layer are created (thus consuming too much memory) the operating system kills the web process. This results in the reloads reported here.

The application provided sets button on each card. When the card is tapped, we apply a transform which causes the card to be promoted to its own layer. I'm observing that these cards touch each other which is causing other cards to be composited too. In other words, when one card is composited all of them are.

Can you try the following and let me know if the reported behavior gets better, gets worse, or stays the same?

Set the following CSS to disable the activated transform. This needs to be set in a global stylesheet:

ion-card.ion-activated {
  transform: none !important;
}

[capc0]

With the applied style above the behaviour gets way better. I wasn't able to crash it once in 50 attempts, whereas previously it would crash every second attempt (that is in our production app).

So this is a regression in WebKit then? iOS/Safari 17.2.1 also has this problem. As stated above, iOS 16.6 is not affected. On Android we also have no problems.

[liamdebeasi]

I took a closer look at this, and I don't think this is a WebKit bug. The card is composited when tapping because of the CSS transform that is applied. Any overlapping elements also need to be composited. In this case, the box shadows on the cards slightly overlap which causes all of the cards to be composited. However, only the cards inside of the viewport consume additional memory. While ~500 layers are created, most of them do not consume additional memory as the layers are outside the viewport.

The memory usage does increase in the sample application because of the page transition. On my iPhone 13, the app consumes ~43mb when idle. It consumes ~124mb during the transitions which is to be expected as almost every element on the page is animated. If the card is composited at the same time as the page transition then the app uses ~135mb since I can display 3 cards inside of the viewport at once.

However, ~135mb is far below the memory limit for web processes. How are you reproducing the 500-600mb memory usage?

[capc0]

@loremru can you share your pages setup that leads to the mentioned memory usage of ~500 mb? Are you also using a lot of ion-cards or similiar components?

[liamdebeasi]

can you share your pages setup that leads to the mentioned memory usage of ~500 mb? Are you also using a lot of ion-cards or similiar components?

I was saying that ~500 rendering layers were created, not that the app was using 500mb of memory. During my tests your sample application only consumed about ~135mb of memory. I used the sample application provided in https://github.com/ionic-team/ionic-framework/issues/28660#issuecomment-1863239273. I tested this on an iPhone 11.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!