CODEWITHSUNDEEP
ioscordovaionic-frameworkionic3
Akash B
Akash B

Reputation: 59

White screen appears instead of splash screen

While running my application in iOS device, instead of splash screen a white screen appears. ionic cordova resources command had been used, even after that this issue occurs

Version details:

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (/Users/akashb/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.4

Cordova:

   cordova (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : ios 5.1.1
   Cordova Plugins       : cordova-plugin-ionic-webview 4.1.3, (and 29 other plugins)

System:

   ios-sim : 8.0.2
   NodeJS  : v14.17.3 (/usr/local/bin/node)
   npm     : 6.14.13
   OS      : macOS Big Sur
   Xcode   : Xcode 13.1 Build version 13A1030d

enter image description here

Upvotes: 1

Views: 2553

Answers (1)

Super_Simon
Super_Simon

Reputation: 1296

The white screen has been cause for issue for many years.

When I had the issue, I searched Google relentlessly and quickly realised no one really knew exactly why it does it but appears to be a lot to do with Apple changing the Splash Screen dimensions with different versions of iOS.

Many have suggested solutions with differing success and my specific problem seemed that my Splash Screen wasn't being dismissed quick enough, leaving the screen white. This is the only solution which worked for me - however I use Capacitor and their version of the Splash Screen API so you'll need to modify for your specific needs with Cordova:

import { Platform } from "@ionic/angular";
import { SplashScreen } from '@capacitor/splash-screen';

constructor(
   private platform: Platform
){
   this.platform.ready().then(async () => {
      setTimeout(() => {
        SplashScreen.hide({
          fadeOutDuration: 1000,
        });
      }, 2000)
    })
}

A search for "ionic white splash screen" will present you a vast array of people experiencing the same problem with a multitude of different solutions. I'm afraid you'll probably need to research them and find the one for you.

On a separate note, you should consider updating your version of Ionic from 3 to the current version 5. Although version 6 is due for release imminently.

Upvotes: 2

Related Questions