White page showing after splash screen before app load

ionic-v1
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