After splash screen, display white screen long time

Ionic Framework ionic-v3
62

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();
    }
}
63

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

:+1:

64

Did you find a solution yet?

65

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"
66

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" />
67

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>
68

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" />

69

Mesmo efetuando todos os ajuste indicados, ficou aproximadamente um segundo de tela branca após o splash. Resolvi atrasando o encerramento do splash por um segundo para cobrir a tela branca deselegante. Em “app.component.ts” ajuste da seguinte forma…

initializeApp() {

this.platform.ready().then(() => {

  this.statusBar.styleDefault();

  setTimeout(() => { 

    this.splashScreen.hide();

  }, 1000);

});

}

70

I adjusted your code a bit and it worked!

 initializeApp() {
    this.platform.ready().then(() => {
      setTimeout(() => {
        this.splashScreen.hide();
      }, 1000);
    }
  }
71

This has to be the correct answer. I am on Ionic 5 and this solved the issue for me

72

I am in Ionic 5 + capacitor + angular 11 and here is my story.

  1. The Ionic Native plugin is not the proper solution as it has been replaced by Capacitor Plugin. The Native Plugin has 0 effect. It is best to uninstall this plugin even though it has instructions for Capacitor use. Some extra clean up is to remove the splash screen cordova at the bottom of the config.xml
    Splash Screen - Ionic Documentation (ionicframework.com)

  2. All splash screen configuration in capacitor is in the Capacitor.config.json. You will still have to set an appropriate time to wait so you don’t get white screen blink. I believe the immersive and fullscreen are my changes to help fix the stutter in 3.A. below. This page will show you all options.
    Splash Screen - Capacitor (capacitorjs.com)

“SplashScreen”: {
“backgroundColor”: “#303030”,
“launchShowDuration”: 4000,
“splashImmersive”: “false”,
“splashFullScreen”: “false”
},

  1. As a “bonus” issue I had, was that I am using SVG → Android Vector (ios TBD) for my splash screen. The vector had no background so there was a transition that removed the buttons at the bottom of the screen. This caused a duplicate and stutter in the image as it went from buttons at the bottom to no buttons. If you are using an image you may not see the duplication.
  • A. To fix the stutter, I had to change to AppTheme.ActionBarLaunch in my styles.xml and my AndroidManifest.xml. And also the immersive and fullscreen in #2.
  • B. The duplicate image is because my SVG → Vector had no background so I added a square path “background” that I set the color to black. The background color still toggled so I found that the capacitor.config.json background in splash screen and mirrored the values with my vector path.
  1. The above snippet works partially. If you are using Capacitor then the splashScreen is no longer injectable but now uses a constant.

import { Plugins } from ‘@capacitor/core’;
const { SplashScreen } = Plugins;
…
@HostListener(‘document:readystatechange’, [‘$event’])
onReadyStateChanged(event) {
if (event.target.readyState === ‘complete’) {
SplashScreen.hide();
}
}

1 Like
73

my problem was a white screen during one second after splash screen, its a navigation problem, so my solution was change the background color of the whole app in globals.scss its working just fine now

74

I could make it on ionic 5 and angular with.
ionViewDidEnter() {
this.splashScreen.hide();
}