Cordova, Intel XDK Letterboxing / Black Bars

[Richard_J_]

I am doing some work on an app that is currently in iTunes, TPA4US Jobs App with Cordova CLI 4.1.2 and Intel XDK 2366, targeting IOS 7.

Since upgrading to IOS 9.1, the app from iTunes runs letterboxed, with black bars at the top and bottom of the screen. When I build an ipa with Intel XDK it looks fine on the same device, see attached screenshots.

This issue affects iPhone 5s and 5th generation  iPod Touch with 640 x 1136 resolution. The 640x1136 splash screen is included in the project with the iTunes version and the Intel XDK build.

Has anyone come across this before? My build looks fine, but I am concerned that it will run letterboxed when downloaded from iTunes.

Thanks for any help.

[John_H_Intel2]

I haven't seen this before, but I dont do any testing on iPods, only iPhones and iPads. 

I would assume that if your build from the XDK installs/looks fine, it should also fix the letterboxing you are seeing in the app currently in the store.

[Richard_J_]

Thanks for the reply.

This issue affects iPhone 5S as well, not just the iPod.

I hope you are right, but the version that is in iTunes also looked fine when I built it, and ran correctly on IOS 8 when downloaded from iTunes. Something changed with IOS 9, I would like to have some idea what is going on before I resubmit if possible.

These phonegap developers are having similar issues, supposidly www/ is not allowed as a path for splash screen images.

http://community.phonegap.com/nitobi/topics/black-bars-at-top-and-bottom-of-app-after-ios9-upgrade

Thanks for the help.

[John_H_Intel2]

If I remember right, Apple put out an announcement while back stating that any app that letterboxed would be rejected. 

Also, just a a precaution, I would not have www in the image path.

[PaulF_IntelCorp]

Note the other solution that seems to work involves using the splash screen. See this entry from that post you referenced:

FilmKit 1 month ago

In order to make it work in PhoneGap build, set auto-hide-splash-screen to false in config.xml

Make sure you have the right splash screens in res/screen/ios and that the splash screen plugin is loaded

To hide the splash screen after page load, add this to your onDeviceReady

onDeviceReady: function() {

setTimeout(function() {

navigator.splashscreen.hide();

}, 1000);

}

This fixed the black bars issue in ios9 for me. Turning off hydration fixed the issue of the app not responding to taps. Would still be nice if we got an official answer/fix from Adobe

@Jadii: if your config.xml is in the www folder, you should change the paths to res/screen/ios, instead of www/res/screen/ios

To set the autohide false that he is suggesting, add the following lines to your intelxdk.config.additions.xml file:

<platform name="ios">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="false"/>
    <preference name="FadeSplashScreenDuration" value="2"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>
</platform>

And then include the splash screen hide function he shows. Most projects already have the splash screen plugin included as part of the project.

[Richard_J_]

Thanks again for the replies.

I will make the update you recommend regarding hiding the splash screen and modifying intelxdk.config.additions.xml.

I used the beep example to get started, which includes code to hide the splash screen on main.js, but does not include the additions.xml code you mentioned. Maybe this is the issue.

Regarding the www path, Intel XDK forces me to put my icons & splash screen in the www folder. The current path is: Documents\BRT\www\artwork\. When I try Documents\BRT\artwork\ I get the error: "Icons and splash screens must be located within the source directory. Copy your icons and splash screens into the source directory first if necessary."

Am I correct that the build system copies the icons and splash screens to a different location, so the www path is not an issue?

I appreciate all the help.

[John_H_Intel2]

When you build your app, everything INSIDE the www folder gets zipped an uploaded. So the fact that they are in a www folder on your harddrive, has not effect on the cloud since it doesnt know about it. As long as you dont have something like

Documents\BRT\www\artwork\. When I try Documents\BRT\artwork\www\images\www 

you should be fine.

[Ian_Ippolito]

I was also having this problem, from a stable build on iOS that had been created several months ago. It happens only on iOS9 with iPhone five. In order to try to do a rebuild, it required me to upgrade to Cordova 4.X.X, from 3.5. One of those two things (the rebuild or the upgrade) cause the problem to disappear on its own.

Ian Ippolito

[Mark_F_]

Hi,

I am having this exact same problem, app build on XDK works perfectly on iPhone 6, but on iPhone 5 it goes into letterbox mode (black bar above and below the app on the screen).

I have set the splash screen to not auto-hide and use the cordova splash screen plugin to hide it after app init.

I have the correct splash screen image sizes (the Intel XDK won't let you add the wrong sizes).

Please can someone shed some light on this form me, thanks.

[Mark_F_]

Please disregard, it turns out it was indeed an incorrectly sized image file, I deleted them all, re-created them and now it works.

For those who come across this problem, MAKE SURE that the 640px x 1136px image is correctly sized.