After splash screen, display white screen long time

For those who might encounter the same issue, but aren’t able to fix this issue. I had this issue for a little bit of time and the reason for this issue was that the platform.ready() was called when the document.readystate was equal to interactive, so I’ve written an event listener on the app.component.ts file to hide the splash screen when the document.readystate becomes complete.

@HostListener('document:readystatechange', ['$event'])
onReadyStateChanged(event) {
    if (event.target.readyState === 'complete') {
        this.splashScreen.hide();
    }
}

this is actually the right solution, --prod when used will disable debugging mode which cause the white screen delay.

:+1:

Did you find a solution yet?

Make this change in your config.xml file…

<preference name="FadeSplashScreenDuration" value="900" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="1000" />
<preference name="ShowSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="false"

I have set the same parameters in the config.xml of my ionic 4 app, yet I am getting a Black Screen when I open the app in my android device (physical). Can someone please help? Thanks.

Here is my ionic setup :

Ionic:

Ionic CLI : 5.2.7 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.7.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 7.1.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 5 other plugins)

Utility:

cordova-res : 0.6.0
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\Sdk)
NodeJS : v10.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

Here are the parameters in my config.xml file :

<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="10000" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreen" value="screen" />
<preference name="ShowSplashScreen" value="true" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="true" />

Hi guys, i’ve been using Ionic since version 1 and the white screen delay has always been there.

But a tip for Ionic team: Can’t we paint this whitescreen black so it gets less noticiable?

I done it myself, was even able to put a background image equal to the splashscreen. The downside is that while using the app, some components like ion-segment have transparent background (so i needed to use background: #fff on them) and if a page takes too long to load you will see whatever you style your index.html to be for a while (not a problem for me).

src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

  <Style>
    .splash-body-img {
      background: #227243 url('/assets/imgs/splashscreen.png') no-repeat center center;
      background-size: contain;
    }

    .splash-body-color {
      background: #227243;
    }
  </Style>
</head>


<body class="splash-body-img">
  <app-root></app-root>
</body>

</html>

Hello @Donbelar
I had the same issue in IONIC V-3. This issue is appearing because we are trying to hide splash screen two times first into

 platform.ready().then(() => {
     this.splashScreen.hide();
});

and second time same thing we are doing in config.xml through “”
Now because of preference and it’s value =“3000” our splash screen is hiding after “3 sec”.
solution ===>
step 1 -> Go to the “config.xml
step 2 -> Add here <preference name="AutoHideSplashScreen" value="false" />