After splash screen, display white screen long time

I’m very excited about this change mainly because of its removal of cordova splash screen & ability to use android’s Java API and iOS Object-C API.

Ionic CLI, web browser development environment, use of angular 5 are phenomenal and definitely a big step forward from Phonegap. However, open source & aged Cordova carries its problems that need to be dealt.

1 Like

Maybe if your app crash it’s due to memory overflow. which can be cause by bad unsuscribe observable. Take a look at this kind of article https://netbasal.com/when-to-unsubscribe-in-angular-d61c6b21bad3

I guess still no solution?
Doing a build with --dev (on a S7) the white screen is there for 6 seconds.
Doing the build with --prod the white screen is almost 3 seconds.

Is the white screen just waiting for the app to load?

There’s no solution to this problem yet.
It’s a permanent behavior of Cordova splash screen which couldn’t be fixed for this many years.
I personally see the gray blank screen & white screen as stigma mark which cordova gives to all of its apps.

My app displays white splash screen and can’t get into home screen on older smartphones running android 4.4. And all Cordova apps will display gray blank screen for a few seconds on start.

The solution is patiently waiting for Ionic team’s Avocado which will replace Cordova. It won’t come with this kind of bizarre splash screen problems.

HTML & CSS3 are much superior to XML in terms of styling UI. However it comes with costs…

HTML5 & CSS3 have the best UI solutions among code languages… and I think it’s totally right to use HTML5 & CSS3 for better UI than using XML so if Ionic team makes a platform which can improve all downsides of Cordova, I think this hybrid mobile app development will last much longer.

please check settings config xml

Hello everyone! I read every post in this topic, try every solution and link to articles, try with and without crosswalk, try on cordova-android 6.3.0 and cordova-android 7.0.0 and still has an issue.

On IOS devices and android 4.2.2 real device all works fine, but on android 6.0.1 / 7.0.0 / 7.1.1 / 8.0.0 real devices not work fade out animation at all and during change from splashscreen to view I have a white screen blink during 1 second.

Here is my topic with config. I also try --prod and --aot and increase SplashScreenDelay to 30000 and nothing helps.

Can anybody help me please?

UPDATE: found solution. Problem was in request android permissions before call splashscreen.hide()

its help ,Thanks It’s work !!

Nice !! it works for me thank you

Yeah we also had a white screen since we setup the splash screen. I admin I didn’t add the splash screen myself so I just thought it was normal behaviour. I just put the time yesterday to try and fix the problem. The problem for us was we were calling splashscreen.hide() way too early. Now we call it in nav.setRoot().then() and I get a clean transition. Even calling it just before nav.setRoot() left still a white screen for a fraction of a second.

I’d suggest running application in browser like this :

ionic cordova run browser --prod --release

This way we are able to debug any errors in browser console, which is quick, simple and effective.

The reason why prod release helps is because this line

<preference name="SplashScreenDelay" value="3000" >

causes it to dissappear after 3000 ms no matter if the app has loaded or not. Remove that line so it dissappears when the platform ready has fired in your app.component constructor.

This line might also help
<preference name="AutoHideSplashScreen" value="false">

nice. It’s working perfectly in ionic 4.

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

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);

});

}