CODEWITHSUNDEEP
cssiphonephonegap-pluginsphonegap-buildios9
yardie
yardie

Reputation: 1557

PhoneGap iOS9 black border issue

I recently upgraded my iphone 6 from iOS 8 to iOS 9. After I opened an app that displayed fine when launched before, it now shows black borders at the top and bottom of the screen, and it automatically loads phonegap logo as the splash screen. Any suggestions on how I can get rid of these issues?

I saw a few articles online making several suggestions but none works for me, one mentioned modifying the config.xml preference from TRUE to FALSE and that did not help. <preference name="auto-hide-splash-screen" value="FALSE" /> '

I also installed the phoneGap splashscreen plugin and that did not help. Any suggestion would be appreciated, I will be testings different things and will share it here if I find a solution.

Thanks in Advance.

Upvotes: 0

Views: 1275

Answers (2)

Yahel
Yahel

Reputation: 8550

As for myself, the problem was simply that I was using a jpg image for the 640x1136 splash screen.

It worked in iOS7 and 8 but showed black bars at the top and at the bottom of the screen in iOS9.

Changed the format and extension of the file to PNG, changed the path in the config file to reflect the change of extension and it started working again.

If you are starting a project, do yourself a favor : Don't use phonegap, it seems attractive on paper but it is hacks on hacks.

Upvotes: 1

yardie
yardie

Reputation: 1557

Below is the solution, I reckon other developers will experience this issue sooner or later as well. Credit to @filmkit over by the phonegap community board.

  1. Go to: myProject/www/res/screen/ios and I replaced 3 of the PhoneGap's images with my 3 splash screens (Same dimension as PhoneGap's).

screen-iphone-portrait-2x.png

screen-iphone-portrait-568h-2x.png

screen-iphone-portrait-568h-2x.png

  1. I then went to myProject/ and edited my config.xml, I changed the below preference from TRUE to FALSE, see below:

<preference name="auto-hide-splash-screen" value="false"/>

2a. Also verify that the paths for each splash screen do not have the 'www' in front of it. They should be: res/screen/ios

  1. I then copied my config.xml file from: myProject/ to: myProject/www

  2. Then edit myProject/www/js/index.js and below this line:

app.receivedEvent('deviceready'); -

add this: 

setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);
  1. Zip your www folder and then go to build.phonegap.com and re-build your app. Please let me know if the above do not work.

Andre

Upvotes: 0

Related Questions