Cordova - white screen after splash, no exceptions in console

Question

I've been away from my Cordova app for a bit, but just did a fresh clone yesterday and noticed that it's got the "white screen of death" symptoms -- the splash screen displays, the program loads... and then I just get a blank screen. Some more details:

CLI: Cordova 6.1.1, android 5.1.1, ios 4.1.1
I'm not using any special plugins to display a splash screen -- just <splash> elements in my config.xml file.
This is happening in both iOS and Android, both on local builds and using PhoneGap Build (i.e., debug and release).
There are no exceptions of missing resources in the console, either in iOS (using Safari's dev tools) or Android (using Chrome's dev tools).
I've done a diff with my last known working build, and there's really nothing that pops out. I saw an undefined Underscore reference, but I backed that change out and it didn't resolve anything -- I think I'd see the exception in the console, anyway.

Has Cordova / PhoneGap done something recently that might be causing this? Any ideas on how to isolate this one? I'm really stumped.

If it's failing on both, you probably have some problem on your code — jcesarmobile, Apr 14 '16 at 06:32
Did you get any error while building or updating the project? Did you try the removing the platform and adding again? Your project is working proper for me when i added the iOS platform and run it in Cordova 6.1.1 and iOS 4.1.1 versions — HardikDG, Apr 14 '16 at 06:48
@Pyro: Thanks, I managed to find the problem last night -- a breaking API change in the SQLite plugin threw an exception. Unfortunately it didn't show up in the Chrome / Safari dev tools, but it did throw in the browser target. Go figure. — eb1, Apr 14 '16 at 17:12
ok , that's great, also, you have maintained the great quality level in code, i will able to learn something from that — HardikDG, Apr 14 '16 at 17:20

eb1 · Accepted Answer · 2016-09-22T19:50:51.767

Well that was ugly. It turned out that there was an exception being thrown, it was just being thrown too early for the browser dev tools to pick it up (Safari, Chrome for iOS and Android, respectively). The exception did show up when I ran things through the browser target (cordova platform add browser, etc.) So that browser platform is useful for something I guess. :-)

In my case, the cordova-sqlite-storage plugin had made a breaking API change that broke the code when I updated everything. The solution was to pin the plugin to an earlier version in the config.xml file.

So, lessons learned:

If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down.
Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.
[another option from @jcesarmobile, below] hitting refresh in the browser dev tools will also kick out the exception. Nice!

I'll be going back in to the config.xml and pinning the other items -- and doing some cleanup as suggested above. Thanks again, everyone.

in a situation like this, the 'console plugin' for Cordova may be useful, as for the iOS it displays the log in the Xcode console if the project is run from Xcode, which may help in detecting this type of issue link:https://github.com/apache/cordova-plugin-console — HardikDG, Apr 14 '16 at 17:37
Safari remote web inspector have a reload button that should catch that kind of errors — jcesarmobile, Apr 15 '16 at 06:44

score 6 · Answer 2 · answered Apr 19 '16 at 08:21

I manged to run your app this are the steps I followed.

1) First you need to declare Splash screen preference along with splash screen plugin location in your config.xml. This is what I think you are missing

<preference
    name="SplashScreen"
    value="screen" />
<preference
    name="AutoHideSplashScreen"
    value="true" />
<preference
    name="SplashScreenDelay"
    value="5000" />

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

    <param
        name="onload"
        value="true" />
</feature>

2) Declare your splash screens images in config.xml ,which you have already done.

I suggest you to keep images in default density folders of android project (ldpi,mdpi,hdpi,xhdpi etc) instead of screen/android folder as it will simplifiy your project structure.

    <!-- you can use any density that exists in the Android project -->
    <splash
        density="land-hdpi"
        src="res/drawable-land-hdpi/splash.png" />
    <splash
        density="land-ldpi"
        src="res/drawable-land-ldpi/splash.png" />
    <splash
        density="land-mdpi"
        src="res/drawable-land-mdpi/splash.png" />
    <splash
        density="land-xhdpi"
        src="res/drawable-land-xhdpi/splash.png" />
    <splash
        density="port-hdpi"
        src="res/drawable-hdpi/splash.png" />
    <splash
        density="port-ldpi"
        src="res/drawable-ldpi/splash.png" />
    <splash
        density="port-mdpi"
        src="res/drawable-mdpi/splash.png" />
    <splash
        density="port-xhdpi"
        src="res/drawable-xhdpi/splash.png" />
</platform>

3) Add Splash screen plugin class into your android project structure under org.apache.cordova.splashscreen package or install splash screen Cordova plugin

https://cordova.apache.org/docs/en/3.1.0/cordova/splashscreen/splashscreen.html

4) Final and most important step you must have cordova.js in your www folder

And after that I was able to run your web app

I am android developer I guess something similar you might need to do for iOS

score 2 · Answer 3 · answered Jan 23 '17 at 22:17

The only fix that worked for me was found here: http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue-14

basically edit your config.xml file. The splashscreen setup should look like this:

<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
<feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
</feature>

score 2 · Answer 4 · answered Dec 15 '17 at 13:55

2

In my case, i put an ALERT before first screen still mounted.

answered Dec 15 '17 at 13:55

Luiz Leite

21
1

wish I could upvote this more. While debugging, I have an alert display as early as possible, so I can attach my debugger. on IOS, the alert shows above the blank screen. on android (as of v11) I'm guessing it's behind the white screen displayed... – Allan Nienhuis Nov 02 '22 at 22:35
are you saying that the (early) alert causes the app to white screen – Rhubarb65 Aug 25 '23 at 11:43

score 1 · Answer 5 · edited May 23 '17 at 12:34

1

I had a similar problem while using cordova with ember.js. It was about the url change strategy of my application.

Have a look on this answer, it maybe related with your problem.

edited May 23 '17 at 12:34

Community

1
1

answered Apr 13 '16 at 19:53

ykaragol

6,139
3
29
56

NGB · Answer 6 · 2016-04-14T07:17:37.903

1

You should install the splash-screen plugin for both iOS and Android to work properly if you are adding splash in config.xml. or else without splash-screen plugin what you could try to do is making an splash screen with HTML, divide your body in 2 parts: content and login. Then you set the content style display: none. When the app is done loading you just set loading screen display: none and content screen display: block or whatever you want

And you missing below preferences in your config.xml

<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />

edited Apr 14 '16 at 07:17

answered Apr 14 '16 at 06:51

NGB

71
1
15

The `Splash Screen` plugins is not needful to install without that we can also display splash screen just for your information. – Jay Rathod Apr 14 '16 at 06:57
1

Can you tell me how we can do without Splash-screen plugin it would be very helpful. @jaydroider – NGB Apr 14 '16 at 07:10

score 1 · Answer 7 · answered Apr 14 '16 at 07:14

1

Try adding this preference to your config.xml, maybe this is the problem

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

answered Apr 14 '16 at 07:14

Víctor

3,029
3
28
43

score 1 · Answer 8 · answered Apr 28 '17 at 19:43

1

A missing <meta http-equiv="Content-Security-Policy"> tag on the head caused a white-screen in my case.

answered Apr 28 '17 at 19:43

Yuval A.

5,849
11
51
63

Yuval A. what would be the reason adding this would fix your issue? – mediaguru Jun 12 '17 at 22:28
@mediaguru it probably blocked some resources without it... (I did not give an example for a full Content-Security-Policy tag) – Yuval A. Jun 12 '17 at 22:47
Ok thanks. I currently have that line commented out in my index.html. Perhaps I'll uncomment and see what happens. My problem is slightly different. After the splash screen screen goes blank. If I rotate the device, the view appears but no interface items work. Rotate back and all functions work. – mediaguru Jun 12 '17 at 22:52

Vijay · Answer 9 · 2018-02-02T08:49:10.703

1

I added these lines in config.xml

<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="6000" />

I also have a black screen when I give screendelay as 3000.so I changed to 6000.I think cordova take some time to load your js,css and image files.

edited Feb 02 '18 at 08:49

answered May 23 '17 at 02:34

Vijay

11
3

score 0 · Answer 10 · answered Dec 26 '16 at 13:43

0

In my case, I accidentally commented the state definition in app.js.

answered Dec 26 '16 at 13:43

Priyank

11
3

score 0 · Answer 11 · answered Mar 30 '17 at 13:13

0

My problem was with ES6, it runs perfectly on iPhone and Android 6, but it doesn't work with Android 4 and 5.

answered Mar 30 '17 at 13:13

Fabio Campinho

982
8
13

score 0 · Answer 12 · answered Apr 27 '18 at 16:55

I have this situation and solved it.

In my case it was something similar to this code:

$scope.images.push({ id: i, src: "http://placehold.it/50x50" , pstb, trno});

The above code run well on android 7.0 but only white screen after splash on android 4.4.4

Changed to this:

$scope.images.push({ id: i, src: "http://placehold.it/50x50", pstb: pstb, trno: trno});

Run on all devices (at least all my devices)

score 0 · Answer 13 · answered Dec 02 '20 at 17:10

0

Not really an answer, but I'll add it to the list of potential experiments here - I never worked out how this was happening, but it was resolved by deleting the entire platforms folder and node_modules, then re-adding the platform.

answered Dec 02 '20 at 17:10

Chris Rae

5,627
2
36
51

score -1 · Answer 14 · answered Apr 20 '16 at 08:04

1>> If you suspect there's an exception being thrown during startup, you can use the browser platform to track it down. 2>>Pin your plugins to a specific version using the spec parameter in the config.xml. This will save you some heartache in the future.

Cordova - white screen after splash, no exceptions in console

14 Answers14

Linked