White page showing after splash screen before app load

thank’s @gastonbesada, it works for me.

@CyBeRCeD1190 : Same problem here. Do you got a solution?

Set a longer time for splash autohide in the config.xml and hide the splashcreen from your app code on device ready or ionic platform ready code.

Edit: sorry, I’ve referenced the thread title not the above discussion :-\

Check if there are some missing plugins.

Hello all and thank you for your help.
I just wanted to share what worked for me since it took me a good couple of hours :smile:

after following the instructions above in this post make sure you run:

ionic platform remove ios
ionic platform add ios

I hope this helps.

1 Like

I have tried all of the suggested solutions listed here, but still no luck. UPDATE hey @CyBeRCeD1190 and @m1crdy the fix is actually similar to @gastonbesada’s above, but with some important points outlined below!

I have seen this problem before ionic was even around, so this problem may be completely unrelated to ionic. I believe the problem has something to do with the initial load of a UIWebView on iOS.

UPDATE: The problem does in-fact involve the UIWebView in that the default behavior of the splash screen is that it fades out before the web view has had a chance to load the ionic app and as a result it will display a blank white screen until the content is loaded and displayed, however, I was able to fix this without having to dive into any of the native code. If anyone is still struggling and interested to know how, read on.

The first step was to Install the following plugin: cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

Next, in the ‘run’ function of your ionic app, you need to add the following line inside the $ionicPlatform.ready success callback:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
     navigator.splashscreen.hide();
...

This will set the splash screen to hide only once the app has completely loaded into the UIWebView.

Lastly, it is IMPORTANT to note that the following step be done in the correct config file:

In the root of your app directory and NOT in the platform/ios/YOUR_APP directory, open Ionic’s config.xml file and add the following preference which needs to be set to ‘false’:

<preference name="AutoHideSplashScreen" value="false" />

If you change this setting in Cordova’s default.xml or the ios app config.xml, it will revert back to ‘true’ every time you build your app. Setting this in the Ionic config.xml will ensure it is set during the build process.

Note, there is an additional preference titled ‘FadeSplashScreen’ which defaults to ‘true’ as well, but it is OK to leave it out if you still want the splash screen to fade away instead of just seeing it abruptly hide. Otherwise, add this preference as well and set it to ‘false’.

Save the config.xml file, build your project, and run on an actual device to see the result!

Hope this helps, this drove me crazy for quite some time.

3 Likes

@disrupt Nice to know you could lead with this issue.
If you see in my reply point 2, I suggested change param autohidesplash in defaults.xml in myapp/platforms/ios/cordova/
It is becase when cordova (ionic cli) build the app, overwrite config.xml with this param declared in defaults.xml.

As few mentioned here below steps will work for sure

  1. Install the cordova plug in
    $ cd myapp
    $ cordova plugin add org.apache.cordova.splashscreen

  2. Change the ionic config.xml file at root project level. DO NOT modify anything directly inside platform folder. ionic build will take care of that automatically.

    Config.xml

  3. Regenerate the platform to add newly installed plugin

    ionic platform remove ios
    ionic platform add iOS

  4. Add hide() in the app controller

    .run(function ($ionicPlatform, $rootScope, $ionicPush, $cordovaPush) {
    $ionicPlatform.ready(function () {

         navigator.splashscreen.hide();
        
             if (window.cordova && window.cordova.plugins.Keyboard) {
                 cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
             }
             if (window.StatusBar) {
                 // org.apache.cordova.statusbar required
                 StatusBar.styleDefault();
             }
         });
     })
    
  5. Re-build the project

4 Likes

@Mishi, @gastonbesada,
After following your suggestions and rebuild app, the issue still remains. I am build the app for android

my ionic info is :
OS: Windows 7 SP1
Node Version: v0.12.0
Cordova CLI: 5.0.0
Ionic Version: 1.0.0-rc.5
Ionic CLI Version: 1.3.22

I solved the issue by keeping additional

<preference name="SplashScreenDelay" value="10000"/>

in confix.xml

Is this solution is correct

Here is my preference values

<preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>

And try below code in yoiu app.js in .run function

if(navigator.splashscreen){
                        setTimeout(function () {
                            navigator.splashscreen.hide();
                        }, 100);
                }
1 Like

Hi ! Try to use this code below

$ionicPlatform.ready(function() {
    setTimeout(function() {
        $cordovaSplashscreen.hide();
    }, 500);
}

And in the config.xml, I use this:

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

In my app works good this !

Good Luck !

6 Likes

This is work for me! You are save my day :smile:

This fix worked for me! Thanks @gastonbesada

would it also be possible to hide the splash screen after the first view has completely rendered? that would be extra sweet

Continuing the discussion from White page showing after splash screen before app load:

Hi ! Try to use this code below

$ionicPlatform.ready(function() {
    setTimeout(function() {
        $cordovaSplashscreen.hide();
    }, 500);
}

And in the config.xml, I use this:

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

In my app works good this !

Good Luck !

Update! This code run Android and iOS, and same issue with iOS8 is fix

 setTimeout(function() {
        if (device.platform == "Android") {
            $cordovaSplashscreen.hide();
        }
        if (device.platform == "iPhone" || device.platform == "iOS") {
            navigator.splashscreen.hide();
        }
    }, 500);
2 Likes

From what I could test, navigator.splashscreen.hide(); has no effect whatsoever and only actually does something for me, which is a shame.

Here is my solution:

Build the app for iOS then run the app on your phone and look in the Xcode console for any messages relating to missing images, so for example my console said:

WARNING: The splashscreen image named LaunchImage-568h was not found

So I added that image named LaunchImage-568h@2x.png into the Resources/splash folder in Xcode.

Hi, could you explain this issue: http://forum.ionicframework.com/t/exit-does-not-close-app-completely-in-kitkat-android/32359. After use ionic.Platorm.exitApp() in Android and then reopen app, the splashscreen is not working, but white screen.

I will implement this solution in App