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

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

[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;
}

1. 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.

1. 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!

[liamdebeasi]

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