bug: ios, unexpected reloads with safari and z-index

[EinfachHans]

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
• Nightly

Current Behavior

First: This may be a Webkit Bug, but i'm not 100% sure. Also i never reported a issue to them before and i know you guys did and know what they need to handle an issue faster.

In our app we have a lot of crash Reports, which are related to the internal Webview beeing reloaded after a crash. I already looked on this topic together with Sean, who gave me a lot of performance refactoring points, which doesn't resolved the issue. We were not able to determinate this 100%. But know i was able to create a reproducable repo.

I'm not sure what is causing this, but it is definitive relevant to the amount of items on the page. When clicking on the first item: Everything works fine. If you scroll down and click on the 60th item: CRASH

This is shown in the xcode console:

2022-08-15 10:59:43.750201+0200 App[19481:2159300] [Process] 0x110000940 - [PID=19482] WebProcessProxy::didClose: (web process 0 crash)
2022-08-15 10:59:43.750269+0200 App[19481:2159300] [Process] 0x110000940 - [PID=19482] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=4
2022-08-15 10:59:43.750307+0200 App[19481:2159300] [ProcessSuspension] 0x10f018240 - ProcessAssertion: Failed to acquire RBS Background assertion 'ConnectionTerminationWatchdog' for process because PID 0 is invalid
2022-08-15 10:59:43.750426+0200 App[19481:2159300] [Process] 0x14e01bc18 - [pageProxyID=7, webPageID=8, PID=19482] WebPageProxy::processDidTerminate: (pid 19482), reason 4
2022-08-15 10:59:43.751835+0200 App[19481:2159816] [ProcessSuspension] 0x10f018240 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'ConnectionTerminationWatchdog' for process with PID=0, error: (null)
2022-08-15 10:59:43.754919+0200 App[19481:2159300] [Loading] 0x14e01bc18 - [pageProxyID=7, webPageID=8, PID=19482] WebPageProxy::dispatchProcessDidTerminate: reason=Crash
2022-08-15 10:59:43.756985+0200 App[19481:2159816] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-08-15 10:59:43.757016+0200 App[19481:2159816] [ProcessSuspension] 0x10f0182a0 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'WebProcess Background Assertion' for process with PID=19482, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
⚡️  WebView loaded

Expected Behavior

The webview should not crash 😃 If this is a webkit bug, it would be awesome if you could create the issue there and link it here.

Steps to Reproduce

1. Check out my repo
2. Build and run for iOS
3. Click on first item: No problems (you can click back)
4. Go back
5. Scroll down until no more items are loaded
6. Click on last item --> Crash (you cant go back because webview reloads and there is no history)

If you scroll down until all items are shown, than scroll up again and click on the first item it also crashes so is related to amount of items on that page

Code Reproduction URL

https://github.com/EinfachHans/ionic-webkit-crash

Ionic Info

Ionic:

Ionic CLI : 6.20.1 (/Users/hans/.nvm/versions/node/v16.14.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.2.2
@angular-devkit/build-angular : 14.1.2
@angular-devkit/schematics : 14.1.2
@angular/cli : 14.1.2
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.0.1
@capacitor/android : not installed
@capacitor/core : 4.0.1
@capacitor/ios : 4.0.1

Utility:

cordova-res (update available: 0.15.4) : 0.15.1
native-run : 1.6.0

System:

NodeJS : v16.14.2 (/Users/hans/.nvm/versions/node/v16.14.2/bin/node)
npm : 8.6.0
OS : macOS Monterey

Additional Information

I'm testing on an iPhone 13 Pro with iOS 15.6

[DwieDima]

I can confirm this issue in one of our apps, too.
I get this error when i updated to IOS 15.6, on IOS 15.4 everything worked as expected.

This is probably related to webkit, where they fixed some flickering issue when using overlapping z-index layers.
Strangely enough this fix causes flickering on my side (webkit crash). Before everything was good 😄😄.

https://webkit.org/blog/13009/new-webkit-features-in-safari-15-6/

When i remove elements which got position absolute and higher z-index, webview won't crash.

2022-08-15 16:07:00.624603+0200 Test[506:15724] [Process] 0x118001230 - [PID=516] WebProcessProxy::didClose: (web process 0 crash)
2022-08-15 16:07:00.624812+0200 Test[506:15724] [Process] 0x118001230 - [PID=516] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=4
2022-08-15 16:07:00.624959+0200 Test[506:15724] [ProcessSuspension] 0x1160183c0 - ProcessAssertion: Failed to acquire RBS Background assertion 'ConnectionTerminationWatchdog' for process because PID 0 is invalid
2022-08-15 16:07:00.625234+0200 Test[506:15724] [Process] 0x10482d018 - [pageProxyID=7, webPageID=8, PID=516] WebPageProxy::processDidTerminate: (pid 516), reason 4
2022-08-15 16:07:00.626030+0200 Test[506:16302] [ProcessSuspension] 0x1160183c0 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'ConnectionTerminationWatchdog' for process with PID=0, error: (null)
2022-08-15 16:07:00.642627+0200 Test[506:16302] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-08-15 16:07:00.642914+0200 Test[506:16302] [ProcessSuspension] 0x116018420 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'WebProcess Background Assertion' for process with PID=516, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-08-15 16:07:00.660392+0200 Test[506:15724] [Loading] 0x10482d018 - [pageProxyID=7, webPageID=8, PID=516] WebPageProxy::dispatchProcessDidTerminate: reason=Crash

[liamdebeasi]

Thanks for the issue. I tested this on an iPhone 11 running iOS 15.6 and was unable to reproduce the issue. Here are the steps I followed.

1. Cloned repo.
2. Built app for iOS using Capacitor.
3. Ran app on iPhone 11 using iOS 15.6.
4. Tapped first item. Observed that I was able to go back.
5. Scrolled to bottom until no more items loaded.
6. Tapped the last item. Observed that I was able to go back.

Did I miss anything?

repro-video.mp4

[liamdebeasi]

I changed the max number of items from 60 to 200 and now I can reproduce the issue. Let me take a closer look.

[liamdebeasi]

When transitioning to a new page, the webview memory spikes to over 1GB which is likely why the webview is restarting.

[liamdebeasi]

This does appear to be a bug in WebKit. I file an issue with the team here: https://bugs.webkit.org/show_bug.cgi?id=243949

[selected-pixel-jameson]

Sadly this seems to be an issue in iOS 16 as well. :(

[EinfachHans]

@selected-pixel-jameson it is and for us it is very critical. Maybe it helps if you comment in bugzilla as well so apple priorizes this up

[selected-pixel-jameson]

@EinfachHans Same here. I'm checking iOS 15.7 right now, but I'm assuming the same issue will persist since the bug report has not been addressed.

[selected-pixel-jameson]

Still an issue with 15.7 as well.

[liamdebeasi]

Hi everyone,

I have an update on this WebKit issue:

---

Why is this issue happening?

There was a bug fixed in iOS 15.6 related to negative z-index values. This fix had an unintended side effect where elements with negative z-index values trigger backing store (an optimization in WebKit) when animating. This can help improve application performance at the expense of memory. When too many elements trigger this optimization, the web process gets killed for using too much memory.

ion-item uses negative z-index values on the .item-native::after pseudo element for hover, active, and focused background colors. Applications that use a large number of ion-item elements can trigger the reported behavior.

At the moment this issue impacts iOS 15.6, 15.7, and 16.0.

---

How can I work around the issue in my app?

There are a few options here:

1. Disable the ::after pseudo element
   This will cause hover, active, and focused states to no longer be visible.

ion-item::part(native)::after {
  content: none;
}

2. Remove the negative z-index on the ::after psuedo element
   This will allow hover, active, and focused states to continue to work. However, the background color will appear on top of any content in ion-item instead of underneath it. If your hover, active, and focused state background colors are too dark, this approach may hide content.

ion-item::part(native)::after {
  z-index: 0;
  pointer-events: none;
}

Note: The pointer-events: none is important as the pseudo element should not receive click events.

3. Limit or remove ion-item usage
   Having a large number of ion-item instances triggers this bug. As a result, limiting or removing your usage of ion-item can avoid the issue. Implementing virtual scroll can help ensure that only a small number of ion-item elements are in the DOM at a time. We have guides on how to get started with virtual scrolling in Ionic:

Virtual Scrolling with Ionic Angular: https://ionicframework.com/docs/angular/virtual-scroll
Virtual Scrolling with Ionic React: https://ionicframework.com/docs/react/virtual-scroll
Virtual Scrolling with Ionic Vue: https://ionicframework.com/docs/vue/virtual-scroll

---

When will this issue be fixed?

Since this is a bug in WebKit, we are unable to comment on when this issue will be resolved. However, we are in contact with the WebKit team and are trying to get this fix prioritized.

---

I will post any additional updates on this thread. Thanks!

[selected-pixel-jameson]

@liamdebeasi Thank you! We will try this out immediately!

[EinfachHans]

@liamdebeasi Thanks a lot for diving in and the summary! 👍🏼 Just tested by removing the ion-item in our app as it wasn't really needed and it seems to work! In the same step i mentioned that the app crashes in the same way (webview crash) when having a long list of <ion-card> elements (repo updated), which doesn't use a z-index right? Can you have a look at what is causing this then for card elements as well? 🤔

[selected-pixel-jameson]

@liamdebeasi This also seems to fix the issue for us in preliminary testing. Unfortunately the content within our ion-item's is dynamic so we are unable to use virtual scrolling due to it's requirement of a consistent heights.

[liamdebeasi]

@liamdebeasi Thanks a lot for diving in and the summary! 👍🏼 Just tested by removing the ion-item in our app as it wasn't really needed and it seems to work! In the same step i mentioned that the app crashes in the same way (webview crash) when having a long list of <ion-card> elements (repo updated), which doesn't use a z-index right? Can you have a look at what is causing this then for card elements as well? 🤔

ion-card has transform: translateZ(0) which also forces compositing. However, this code is is not needed anymore. Here is a dev build that should help ion-card avoid this WebKit bug: 6.2.7-dev.11663165498.15db3e25 (You should also see a general reduction in memory usage when using ion-card)

[EinfachHans]

@liamdebeasi works 👍🏼

[liamdebeasi]

I merged #25942 which will avoid this bug with ion-card. It should be available in an upcoming release of Ionic.

[liamdebeasi]

We will post any updates as we have them. If there has not been a new post, then there are no new updates. I also recommend following https://bugs.webkit.org/show_bug.cgi?id=244543. The WebKit team thinks that the fix for this will resolve the issue reported here.

[liamdebeasi]

The related WebKit issue has been fixed. I will test this in an upcoming Safari pre-release to see if this fixes the issue reported here.

[koczka]

@liamdebeasi Hey, would you be able to confirm if my app is crashing because of this issue? I can add you to the repository which contains the whole project that is failing since iOS 16.

[liamdebeasi]

Unfortunately, we don't provide free support/debugging. However, you can check using Safari Developer Tools. In the
"Layers" tab, take note of the "Memory" section in the bottom right corner of the window:

(Note "Memory: 37.40 MB" in the bottom right)

Perform the steps that crash your app. If you see the "Memory" usage spike significantly, then it is possible that you are running into this WebKit issue. In this case, you should be looking for memory spikes of 100s of megabytes (such as jumping from 50MB to 1GB). In other words, you are looking for a jump in memory significant enough for the web process to be killed by the operating system.

[aswinramakrish]

I had this issue and I spent a couple of days trying to figure it out. The problem was this -

I was using react-lazy-load-image-component (https://www.npmjs.com/package/react-lazy-load-image-component) in place of an image. I switched it to IonImg and it started working like a charm.

[koczka]

My issue was related to AnimationController from @ionic/angular. My app has a background animation that consists of 4 shapes that are sliding back and forth with the transform property. After disabling this animation the crashes stopped.

[EinfachHans]

@liamdebeasi the testcase you provided at the webkit issue still seems to crash for me with iOS 16.1.0

[liamdebeasi]

The WebKit fix has not shipped in iOS yet, so this issue will continue to reproduce.

[gribjo]

Observing similar behaviour in Cordova I cut out some components of index.html and got the stuck app to run again.
In the second step I found reducing the amount of css helps for a smooth launch.
Now the final solution for me is to load css after launch and before hiding launchscreen like specified here:
https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript

[ucjallen]

This is happening still, it is completely blocking the release of my app. One page of 4 similar/identical pages is crashing with this error. Making Ionic unusable at this point......

I do not use ion-item or ion-card, just a lot of ion-grids and ion-slider. The pages that do work are constructed the exact same way, really annoying bug.

It is also intermittent, it works sometimes, crashes others, usually works on the second reload after crashing on first visit

This is the payload that is crashing....stupid. It was 10mb, thought maybe that was the problem, reduced it all the way down to this and iOS or ionic cant handle it
https://freeimage.host/i/yjSGNS

2022-11-12 17:32:24.631050-0700 App[9987:1450393] [Process] 0x112001ac0 - [PID=9992] WebProcessProxy::didClose: (web process 9992 crash)
2022-11-12 17:32:24.631109-0700 App[9987:1450393] [Process] 0x112001ac0 - [PID=9992] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=Crash
2022-11-12 17:32:24.631215-0700 App[9987:1450393] [Process] 0x103832618 - [pageProxyID=7, webPageID=8, PID=9992] WebPageProxy::processDidTerminate: (pid 9992), reason=Crash
2022-11-12 17:32:24.633277-0700 App[9987:1450393] [Loading] 0x103832618 - [pageProxyID=7, webPageID=8, PID=9992] WebPageProxy::dispatchProcessDidTerminate: reason=Crash
2022-11-12 17:32:24.637866-0700 App[9987:1450784] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-11-12 17:32:24.637912-0700 App[9987:1450784] [ProcessSuspension] 0x1110204e0 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'ConnectionTerminationWatchdog' for process with PID=9992, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-11-12 17:32:24.639298-0700 App[9987:1450784] [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}>
2022-11-12 17:32:24.639508-0700 App[9987:1450784] [ProcessSuspension] 0x111020720 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'WebProcess Background Assertion' for process with PID=9992, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}
2022-11-12 17:32:24.641589-0700 App[9987:1450393] [Process] 0x11106c220 - GPUProcessProxy::gpuProcessExited: reason=IdleExit
2022-11-12 17:32:24.641612-0700 App[9987:1450393] [Process] 0x112003bc0 - [PID=0] WebProcessProxy::gpuProcessExited: reason=IdleExit

[liamdebeasi]

@ucjallen Since this is a WebKit bug, I recommend posting on https://bugs.webkit.org/show_bug.cgi?id=243949 explaining that this is blocking your application launch.

However, I also noticed that your error code (reason=Crash) is different than the issue author's error code (reason=4). I recommend checking the memory usage in the "Layers" tab of Safari Dev Tools to verify that you are encountering the same issue that is being reported here.

[brunoinds]

The problem with the z-index is one of the large amout of Safari issues. Pages with a lot of elements, like a MindMap App, animations, transitions and JS heap memory associated with the framework (Vue, React, Angular) have issues with the renderization and Safari crashes.

So, I think is important to have a forum or a specific page on the Ionic documentation with the News and Advices about WebKit issues, so we can discuss with the community those scenarios and possibles workarounds. since we cannot change the Safari idiosyncrasy. It will help a lot!

[therealPaulPlay]

Observing similar behaviour in Cordova I cut out some components of index.html and got the stuck app to run again.
In the second step I found reducing the amount of css helps for a smooth launch.
Now the final solution for me is to load css after launch and before hiding launchscreen like specified here:
https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript

I also have a similar issue in cordova when switching to a different window.

[Ivan981508]

I've been really looking for a solution to this sudden problem for a long time. I can identify 2 main fixes: 1. Do not use a negative z-index (this leads to a very significant memory leak)
2. Apply global styles for ion-content

ion-content {
  background-color: white;
}

ion-content::part(background) {
  display: none !important;
}

This will prevent an overabundance of memory and a possible restart of the application during transitions.

In principle, the use of 2 of these items was enough for me. But it still uses a large memory leak, because of this error. Since most of the standard ionic components are subject to this problem!

[liamdebeasi]

Hi everyone,

Does this issue reproduce for you all on iOS 16.3? I can no longer reproduce the issue on my end.

[Ivan981508]

Unfortunately, I can't check on ios 16.3 right now. I hope this problem will be fixed!

[Ivan981508]

It looks like the problem still remains on ios 16.3

[EinfachHans]

@Ivan981508 are you sure this is the same problem? Because i can't reproduce this either @liamdebeasi

[macsupport]

I had this problem and got it to resolve completely by eliminated any css with:

filter:drop-shadow(...)

I saw a big spike in Wkwebview memory usage when a page I was loading that contained icons that all had a drop-shadows. When that memory peaked the App flickered, went black and crashed. Problem went away immediately by eliminating all my drop-shadow css. Hope this helps someone with a similar issue

[liamdebeasi]

Hi everyone,

I am no longer able to reproduce the reported issue in iOS 16.3. I am going to close this since iOS 16.3 is now available. If you are still running into crashes, you are likely encountering a separate issue. I recommend opening a new issue with a minimal reproduction app. Let me know if there are any questions. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.