bug: Capacitor App showing dark screen after starting it up on IOS v13.3.1

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

We developed an ionic/angular app using cordova and migrated it to capacitor. Everything was working as expected in our test after building the app locally in dev mode through xcode.

Then we build the app using the --prod tag and started it up on our test devices. On the iPhone XS (IOS v13.3.1) the app ist starting up and then it’s stuck on gray screen:

The console is not showing any error.

After inspecting the html, we found out that commenting these attributes from the .ion-page is solving the problem :

Expected Behavior

We expected that after building the app in Production Mode the ui is correct after the startup of the app.

GitHub repo

https://github.com/djbanana1/capAppDarkScreenStartup

Steps to Reproduce

1. Run: ionic build --prod
2. Run: ionic cap sync ios
3. Run: ionic cap build ios --prod
4. Deploy the app on an IOS device using IOS v13.3.1

Ionic Info

Ionic:

   Ionic CLI                     : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 7.0.0

Capacitor:

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

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : none
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 20 other plugins)

Utility:

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

System:

   ios-deploy : 1.11.4
   ios-sim    : ios-sim/9.0.0 darwin-x64 node-v14.18.1
   NodeJS     : v14.18.1 (/usr/local/bin/node)
   npm        : 8.18.0
   OS         : macOS Monterey
   Xcode      : Xcode 13.4.1 Build version 13F100

[liamdebeasi]

Thanks for the follow up. The compiled output of Ionic’s CSS does not use inset: 0. Instead, we use the following:

.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
}

It looks like Angular’s CLI is changing the top/right/bottom/left properties to inset: 0 when building for production. Currently, this happens on Angular 13+ (Angular 12 does not seem to be impacted). I have reached out to the Angular team for clarification on if this is intentional and if it can be customized.

[liamdebeasi]

Hi everyone,

The issue here is related to the .browserslistrc file. Your file has last 2 iOS major versions which will account for iOS 15 and iOS 14. Since iOS 13 is not needed, newer CSS will be used. You can change your file to have iOS 13-15 to fix this.

It’s worth noting that Angular does not support iOS 13 anymore (see: https://angular.io/guide/browser-support), so you may run into other issues on iOS 13 with Angular 14.

I am going to close this as this is not a bug in Ionic. Thanks for the report!