Phonegap iPad App Splash / Launch Screen Shifts on deviceReady

Question

I have an iPad Application (landscape orientation only) created with HTML/JS/CSS + Phonegap; everything works as expected however I've run into a problem with the Splash / Launch Screen.

When the Application loads, the correct Splash / Launch Screen is shown (correct size and naming etc.), however once the application reaches deviceReady state and hides the Splash / Launch Screen, it shifts up about 20px and shows a white bar along the bottom right before it is hidden.

Does anyone know what is happening and / or how to fix it?

Thank you!

Answer 1

For anyone running into this same problem; turns out that this is actually part of how Phonegap works. After the initial launch image is displayed and right before the deviceReady State kicks in, Phonegap shifts the UIWebView up 20px. The workaround is to create the launch image at the full pixel size of the screen and disregard the warning in Xcode.

I've posted several apps to the iTunes store this way without any problems.

I hope this helps someone!

Answer 2

this has been fixed with the version 1.7.0 here the commit: http://git-wip-us.apache.org/repos/asf?p=incubator-cordova-ios.git;a=commit;h=73620e43

i have just upgraded a project i have and it works.

Answer 3

Our image is 1024x768 and we are still seeing the pixel shift. Is 1024x768 not the full pixel size of the screen? I check Apple's hardware spec and it said that it was. Have you tried anything else that worked?

Thanks Adam

Answer 4

I've had this problem too, and in my case the problem was caused by adhering to Apple's own specifications.

I'm pretty sure Apple specifies that the file ought to be 1004 by 768, so if you have been mindlessly working to their specifications, don't think that you will therefore not get any problems.

If you build a PhoneGap app, you will have to dance to Phonegap's music. So Adam Robertson, have you truly double-checked that you have the right image size?

If you have, here is another possible cause/solution:

Try setting the "status bar initially hidden" option in the project's plist file (not phonegap.plist or cordova.plist but the one with your project's name) to True. This way, the 1024-sized image will fully get the light of day, and Phonegap won't feel it has to pump it around.

If the image really is 1024x768 in size, this should prevent cordova from trying to manipulate the image. If there are still issues, try setting different values for 'status bar style' in the same plist file. Some are transparent, others opaque: maybe they have an effect as well.