cordova - PhoneGap and iPhone 6 Plus splash screen issue

Question

Ok, so while updating my app for iOS 8 and the larger iPhones I noticed an issue that I can't figure out how to resolve.

In my PhoneGap app, I have added a new asset library in Xcode for the splash screens, I added two new images, one for the iPhone 6 portrait and one for the iPhone 6 Plus portrait.

They work and the app now doesn't scale as it did without these images.

The issue is, on the iPhone 6 Plus when the app loads, the splash screen initially appears fine, but within a second or two it changes size and is displaying off the screen, like the screen changes its size and now half of the logo is off the screen, has anyone else seen this and know how to fix it? The image is the correct size as dictated by Apple, so not sure why its changing size mid app load.

Answer 1

I was experiencing the same issue, which I narrowed down to the splashscreen plugin (org.apache.cordova.splashscreen). Here are the steps needed for me to fix the issue on both iPhone 6 & iPhone 6+:

1. Update to the latest version of the splashscreen plugin (which has been patched on GitHub):
   • cordova plugin remove org.apache.cordova.splashscreen
   • cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git
2. Recreate the entire iOS platform through cordova:
   • cordova platform remove ios
   • cordova platform add ios
   • cordova build ios
3. Ensure your iPhone 6 & iPhone 6+ splashscreen images are named Default-667h@2x~iphone.png and Default-736h@3x~iphone.png, respectively. Then, in Xcode, drag both image files into Resources/splash under your project target in the Project Navigator (pane on the left-hand side of the screen, by default).

It appears that the splashscreen plugin creates a fake splashscreen that should ideally perfectly match the real iOS splashscreen, and when you call splashscreen.hide(), you're actually hiding the fake splashscreen. Just, in the case of iPhone 6/6+, the fake splashscreen is wrong with the version of the plugin you currently get with cordova plugin add org.apache.cordova.splashscreen, and you see the image change size and move off the screen once the real splashscreen is hidden.