12
votes

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.

7
Are you using xcode6 and cordova 3.6.3?Dawson Loudon
Using Xcode 6.1 and PhoneGap 3.5Jason Storey
You need to use cordova 3.6.3 for iOS8Dawson Loudon
Would anything change moving from PhoneGap to using Cordova? I know they are basically the same thing but currently I'm using PhoneGap, Would I just install cordova and then run the update command on my project folder?Jason Storey
Upgrading my project to Cordova 3.6.3 did not solve the issue, the splash screen is still being resized and stretched past the edge of the screen.Jason Storey

7 Answers

7
votes

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.

3
votes

So, because of the complexity of the way our projects are setup, I was not able to remove and add ios/android. I did attempt to create a fresh Cordova 3.6 project and install the new splashscreen plugin but this also did not work as expected.

I was able to solve the issue, although maybe not the best solution, this is what I did.

Inside of the iOS project's CordovaLib/CDVAvailability.h file I added two lines:

#define CDV_IsIPhone6Plus() ([[UIScreen mainScreen] bounds].size.height == 736 && [[UIScreen mainScreen] bounds].size.width == 414)

#define CDV_IsIPhone6() ([[UIScreen mainScreen] bounds].size.height == 667 && [[UIScreen mainScreen] bounds].size.width == 375)

Then inside my CDVSplashScreen.m I added changed:

if (CDV_IsIPhone5()) {
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if (CDV_IsIPad() && isOrientationLocked) {
    switch (orientation) {
        case UIInterfaceOrientationLandscapeLeft:
        case UIInterfaceOrientationLandscapeRight:
            imageName = [imageName stringByAppendingString:@"-Landscape"];
            break;

        case UIInterfaceOrientationPortrait:
        case UIInterfaceOrientationPortraitUpsideDown:
        default:
            imageName = [imageName stringByAppendingString:@"-Portrait"];
            break;
    }
}

To:

if (CDV_IsIPhone5()) {
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6Plus()){
    imageName = [imageName stringByAppendingString:@"-568h"];

}else if(CDV_IsIPhone6()){
    imageName = [imageName stringByAppendingString:@"-568h"];

} else if (CDV_IsIPad() && isOrientationLocked) {
    switch (orientation) {
        case UIInterfaceOrientationLandscapeLeft:
        case UIInterfaceOrientationLandscapeRight:
            imageName = [imageName stringByAppendingString:@"-Landscape"];
            break;

        case UIInterfaceOrientationPortrait:
        case UIInterfaceOrientationPortraitUpsideDown:
        default:
            imageName = [imageName stringByAppendingString:@"-Portrait"];
            break;
    }
}

Not sure why the 568h image works correctly, but I tried specifying the 736 and 667 images, but that did not work. Simple adding those two pieces of code, now the splash screen works correctly on iPhone 6+ and 6.

Unfortunately this fix is a per project solution as it involves editing a Cordova source file.

2
votes

I just updated my splashscreen plugin version 0.3.3 to 0.3.4 and splashscreen started working correctly for iphone 6 and iphone 6+ .

2
votes

The fix for this bug is appending suffix with pixelratio at the end of splashscreen image name - for example 'Default-667h.png' must be 'Default-667h@2x~iphone.png'. For iPhone 6+ pixelratio is 3, so the image name must be changed from 'Default-736h.png' to 'Default-736h@3x~iphone.png'.

1
votes

None of the answers solved the problem for me - the splash still did not work correctly in iPhone 6 & 6s (while it worked well for all other iPhones). Specifically - updating the plugin, naming the images, checking Bundle Resources - non helped. Removing and adding the platform is something I always try to avoid, because it means hours of work connecting all the bits again - I tried it and even this did not help. Hopefully this post will save you all this time :-)

The only solution that worked for me was stop using asset catalog and define the splash in the APP-Info.plist file. Here are the instructions:

  1. From my experience with Cordova: always backup your entire project folder. A simple copy/paste as a backup can save a lot of trouble. So start with a simple backup
  2. In Xcode go to the target screen of your app, scroll down to the "App Icons and Launch Images" section. For the "Launch Images Source" click the field and change it from the launch image to "Don't use asset catalog"
  3. Go to your app-Info.plist and add the following (this is the raw text. You can also use a text editor to add it):
<key>UILaunchImages</key>
  <array>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 480}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-568h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{320, 568}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-667h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{375, 667}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape-736h</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{414, 736}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Portrait</string>
          <key>UILaunchImageOrientation</key>
          <string>Portrait</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
      <dict>
          <key>UILaunchImageMinimumOSVersion</key>
          <string>8.0</string>
          <key>UILaunchImageName</key>
          <string>Default-Landscape</string>
          <key>UILaunchImageOrientation</key>
          <string>Landscape</string>
          <key>UILaunchImageSize</key>
          <string>{768, 1024}</string>
      </dict>
  </array>
  1. Last step: make sure your iPhone images are named as the following names I used:

    Default-568h@2x~iphone.png
    Default@2x~iphone.png
    Default-667h@2x~iphone.png
    Default~iphone.png
    Default-736h@3x~iphone.png

Until Cordova fix it I hope this answer will save you a lot of time :-)

0
votes

there is another probability about this question.

sometimes it would not auto create png reference to project, so even you have png, the project doesn't know about it.

so, check your Build Phases > Copy Bundle Resources

make sure all png you have on this list, if you miss something there,

add them to 'Copy Bundle Resources in Build Phases', then run application again, you might see the difference.

enter image description here

0
votes

Make sure that you don't have something like below in your config.xml

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