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

[EinfachHans]

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

• [ ] v4.x
• [ ] v5.x
• [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?

https://user-images.githubusercontent.com/2721089/184688263-ee1fd6d1-3ced-40f2-b014-c072dedb01e5.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 https://github.com/ionic-team/ionic-framework/pull/25942 which will avoid this bug with ion-card. It should be available in an upcoming release of Ionic.

[koczka]

Hello, Are there any updates on this bug? I've tried the workarounds proposed by @liamdebeasi but none of them fixed my issue.

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