White page showing after splash screen before app load

ionic-v1
1

Hi

Is anyone else having this issue with the splash screens in iOS?
I have a splash screen and al files are in place but when running the app first I see the splash screen and then the white webview with a loader for about 0.5 - 2 seconds and after that I see the app.

If course I do have the navigator.splashscreen.hide() code in a deviceready callback within app.run() but when I console.log that line, it fires way after the white screen is hidden. This is my code (snippet):

.run(['$ionicPlatform', function ($ionicPlatform) {
    //*** Workaround for issue [#766](https://github.com/Leaflet/Leaflet/issues/766)
    if (angular.isDefined(L)) {
        L.Icon.Default.imagePath = 'images/leaflet';
        // L.Icon.Default.imagePath = 'vendor/leaflet-dist/images';
    }

    $ionicPlatform.ready(function () {
        if (navigator.splashscreen) {
            console.warn('Hiding splash screen');
            // We're done initializing, remove the splash screen
            navigator.splashscreen.hide();
        }
    });
}]);

In my config.xml (which is in the root of my project, since I’m using Cordova 3.4.1-0.1.0) I have the following lines:

    <feature name="SplashScreen">
        <param name="ios-package" value="CDVSplashScreen"/>
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
        <param name="onload" value="true"/>
    </feature>

And:

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

Is anyone else experiencing this problem? This is a big no-go for the launch of our app and I have no idea how to fix it.

-Robin

1 Like
2

I’m also seeing this problem on my iphone 5.

3

I was having the same issue but it seemed to be fixed by relinking all of my splash screen image assets in Xcode. Did you try that?

4

Not sure about Robin, but I haven’t yet altered the cordova seed app images at all. So I doubt it’s that. And the splash image shows, but after it goes away there is a short time where the screen is just white before the app appears.

5

@Robin if your seeing a while flash before the app is loaded, why don’t you move the splash screen hiding function into the controller that runs first?

6

As for now, it seems that AutoHideSplashScreen in config.xml isn’t honored. This is a part of my config.xml which is, as of Cordova 3.4, located in the root of my project instead of the www folder:

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

@mhartington The problem exists before I’m able to programatically hide the splash screen. So the splash screen is already hidden (and thus the white page showing) before navigator.splashscreen.hide() is called in my .run().

@udi I do already have custom splash screen images in my project.

3 Likes
7

Odd, what does the config.xml look like at your platform level? Weather it be iOS or android, you should be able disable the splash screen from fading away. I’ve done it before in my app and was able to programmatically hide the splash screen.

8

David this problem seems to be inherent to lots of iOS apps that show a webview on startup, even in objective-c.

This answer shows a general solution for native apps using XCode:

I’m not sure if it’s any help in PhoneGap, but I know it works in other packaging environments like Xamarin so wanted to offer it and try to shed light on the problem.

9

@Robin, @udi
I’m sharing with you a solution that is working for me.

1 - Install cordova.splashscreen plugin in your app. Example:

$ cd myapp
$ cordova plugin add org.apache.cordova.splashscreen

output:

Fetching plugin "org.apache.cordova.splashscreen" via plugin registry
Installing "org.apache.cordova.splashscreen" for ios

2 - change the defaults.xml in myapp/platforms/ios/cordova/

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

3 - add in your controllers.js:

angular.module('starter.controllers', [])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    setTimeout(function() {
        navigator.splashscreen.hide();
    }, 100);
 });
})

After make these changes you must rebuild the app: $ ionic build ios

And try it $ ionic emulate ios

Let me know any doubt.

30 Likes
10

YES! That did the trick @gastonbesada. Super thanks. The first solution for this problem I could find on the web. I think editing defaults.xml in myapp/platforms/ios/cordova did it.

11

@gastonbesada it’s working nicely! Thanks so much.

I put the xml lines in my config.xml btw, instead of defaults.xml. Seems to work ok and I’m more comfortable with that.

12

This solution doesn’t work for me.

In my config file, I have :

<preference name="SplashScreen" value="splash" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />

<feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen" />
    <param name="android-package" value="org.apache.cordova.SplashScreen" />
</feature>

But the splashscreen disapears automatically when Ionic is ready.

I can see the view of my first state just after the splascreen disappears. But a white screen appears 1 second, and next the app appears and load data.

If in my $ionicPlatform.ready(), I put this lines :

if(navigator.splashscreen){
  navigator.splashscreen.show();
}

The splashscreen disappears whatever happens.

14

thank’s @gastonbesada, it works for me.

15

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

16

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 :-\

17

Check if there are some missing plugins.

18

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
19

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
20

@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.

21

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