Ionic 6 --prod build gives white screen in ios versions 14.4 and lower

Ionic Framework Ionic Angular
1

Current Behavior

ionic-angular app with production build (–prod) causes “ionic white screen of death” in ios versions 13.5 and 14.4 (both in simulators and real device) but not sure about the real span of version for this behaviour.
app works and responds in the background but nothing on screen

Expected Behavior

ionic-angular production build should work without problem in these versions of ios

Steps to Reproduce

create blank ionic-angular app with either capacitor or cordova
capacitor:
ionic build --prod
npx cap sync

cordova:
ionic cordova build ios --prod

when running the app no problem in ios 16.0 but white screen on mentioned older versions of ios

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (/Users/emreakkoc/.nvm/versions/node/v18.12.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.3.3
@angular-devkit/build-angular : 14.2.7
@angular-devkit/schematics : 14.2.7
@angular/cli : 14.2.7
@ionic/angular-toolkit : 6.1.0

Cordova:

Cordova CLI : 11.0.0
Cordova Platforms : ios 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

ios-deploy : 1.11.4
ios-sim : 8.0.2
NodeJS : v18.12.0 (/Users/emreakkoc/.nvm/versions/node/v18.12.0/bin/node)
npm : 8.19.2
OS : macOS Monterey
Xcode : Xcode 14.0.1 Build version 14A400

anyone has a temporary fix ?

2

–prod is deprecated since angular 13 will try with current way

3

–prod flag is deprecated since angular 13 but
ionic cordova build ios --configuration production
also did not help and causes the same behaviour

4

i think there is a similar issue based on android 30 and below.
If you try to inspect your code with safari technology preview and disable position absolute and display flex in your .ion-page class, something will appear.
sooo weird.
check here: https://forum.ionicframework.com/t/ionic-6-default-project-white-screen-on-android-30-or-below-when-using-prod/228087/8

i think we need the help of the ionic staff

image
image1190×1043 274 KB

image
image1223×1040 145 KB

as temporary fix, if you add this to your ion-page class:

height: 100%;
width: 100%;

it works again

5

this fixed the problem for now, thank you much.
I created an issue let’s see how it will progress

6

there is a solution:

Chrome >=60
Firefox >=63
Edge >=79
Safari >=13
iOS >=13
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

fix your browserslistsrc like this

2 Likes
7

thank you so much again