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

Prerequisites

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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 2
  • Comments: 38 (20 by maintainers)

Most upvoted comments

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!

+7
liamdebeasi on Sep 13, 2022

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

+3
liamdebeasi on Nov 1, 2022

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

+3
liamdebeasi on Aug 15, 2022

It looks like the problem still remains on ios 16.3

+2
Ivan981508 on Jan 28, 2023

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.

+2
liamdebeasi on Sep 26, 2022

@liamdebeasi works 👍🏼

+2
EinfachHans on Sep 14, 2022

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

+1
macsupport on Feb 5, 2023

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.

+1
liamdebeasi on Sep 19, 2022

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

+1
selected-pixel-jameson on Sep 13, 2022
Read more comments on GitHub
← ionic-framework: bug: ios native refresher refreshes too early when used in modal
ionic-framework: bug: iOS white screen after keyboard show (in v1.2.1 and v1.2.0 only) →