Inconsistent iOS 7 Status Bar (build problem)

  • 66
  • Problem
  • Updated 6 years ago
  • In Progress
I've been using Phonegap Build to test my apps for over a week. Suddenly the status bar starts going beneath the Phonegap webview. Even worse, it's not consistent between builds?!

Sometimes the build doesn't make the webview go beneath the status bar, other times it does.

I tried a quick fix adding padding on top of the document (checking if device is running iOS 7 first)–but then the build won't go beneath the status bar and suddenly my app has a frustrating 20px gap at the top. I comment out this fix and then Phonegap Build goes back to going beneath the statusbar...? I've updated and build the code 10 times since this issue started and I simply cannot figure out why there's a difference as I only change the code and not the config.

I really hope someone has a fix for this rather silly issue.
Photo of Pierre Minik Lynge

Pierre Minik Lynge

  • 3 Posts
  • 0 Reply Likes
  • frustrated

Posted 7 years ago

  • 66
Photo of Eddy Verbruggen

Eddy Verbruggen, Champion

  • 375 Posts
  • 86 Reply Likes
Hi Joe, about the white text... it's what I'm using in one of my apps with Cordova 3.3.

Added this to my config.xml:
< gap:plugin name="com.phonegap.plugin.statusbar" / >
< preference name="StatusBarOverlaysWebView" value="true" / >

And on deviceready in my JS I have this for iOS:
setTimeout(function () {
StatusBar.styleLightContent();
StatusBar.overlaysWebView(true);
}, 500);

That timeout may not be needed, but give it a go.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Im having no luck at all.

Last week all worked well, today the status bar goes transparent.

I added the status bar plugin and it goes pink? Build 3.0.0

I change the build to 3.1.0 and it stays pink and a white bar appears at the bottom?

I change the build to 3.2.0 and it stays pink and a white bar appears at the bottom.

I change the build to 3.2.3 and it stays pink and no white bar appears at the bottom.

Why have phonegap changed the behavior of the status bar??

Ive just tested another app that was working fine before and it now also has the transparent status bar???
Photo of Micah Mills

Micah Mills

  • 1 Post
  • 0 Reply Likes
Installing the statusbar plugin did not resolve it for me App ID 786732
Photo of Henk Kelder

Henk Kelder

  • 46 Posts
  • 5 Reply Likes
I said earlier:

"It seems like I might have some problems with effective height of the window when using the Statusbar plugin. But only on an iPhone5 for now and since I do not own such a device I cannot check the errorreport.""

The error doesn't seem to be related to the StatusBar plugin.

For now the statusbar plugin solves workes nicely.

However, a couple of weeks ago I also tried this plugin and then it hung our app on a iPad with iOS 6. When I removed the plugin, that problem was solved.

I just asked the guy who reported that to retest that since the plugin is back in again... *fingers crossed*
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Im really annoyed right now - will someone from phonegap please explain why things have suddenly changed and we need to add this status bar plugin??

Ive wasted 2 days on this issue now and I cant get my app sent to Apple becuase of this one issue that phonegap has caused.

Its really poor to just suddenly change the way the build server works without informing anyone of the changes!!!!!!!

The Plugin does not work for me so for now im just stuck with an App I cant seem to fix.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

Sorry for the late reply, can I have your app id?

Also I cannot state was is the cause in your case for the pink colouring (which it shouldn't be).

We usually announce changes here and on Twitter and are really sorry if the change broke the app.

Will have a look at this and let you know my findings.

In regards the colour change I recommended, it was meant to be changed in JavaScript hence why I recommended reading the plugin documentation which explain how this can be done.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Ive just packaged up a new build.

It uses 3.1.0 and < gap:plugin name="org.apache.cordova.statusbar" version="0.1.4" / >

I haven't added slash screens as its quicker to upload so the App looks small iPhone5

APP ID 804362

You'll see it has a pink/purple bar at the top AND a white bar at the bottom?
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Any news?
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

Looking at this now.

Still haven't figured out the cause of the pink sections.

Will update you with my findings.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
What would be nice is to put it back the way it was! There was never any need to add the status plugin! That would solve the issue.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Will this be looked at over the weekend? Hoping I dont need to wait untill next week for a solution ;-(
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

I will look into this further over the weekend.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
I've tried some things but none worked. Someone mentioned removing the app fully and reinstalling but that didnt work.

Ive tried building with 3.0 3.1 3.2 3.3 3.4 with no luck.

Also tried using the plugin with and without a version number.

Nothing has worked.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

Here's what I have so far.

When I comment out the plugin as you mentioned, the whole page appears correctly(just without status bar withe the bar rather overlapping with the app).

I did some tinkering with your app and with the status bar, commenting the script file for view/main.js allows me achieve the part without status bar plugin(not sure why).

Next I tested to confirm the plugin works which I found that it did(using the background colour method), however there is a file or color that overlays your whole webview and the status bar.

Will continue working on this and update you as I go.

Thanks for the patience and sorry for the inconvenience.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Thanks Ismael, I appreciate you looking into this, but surely it would be easier to work out what changed on the Phonegap Build server?

If you get to the bottom of the issue with this App - im going to have to implement the fix to all my other Apps and I guess many other people will need to change their apps also?

A far easier fix would be to undo the change on the build server? Or am i wrong?!

Cheers

Mark
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I am completely with Mark on this one. Someone changed something last week, and it would be very interesting to know what that was and why it was done. Also, I'd like to know how PGB performs test runs before committing changes.

It might have been necessary to make changes, who knows. But in that case at least the support people should have been fully informed. Isn't it strange that Ismael and other first level support staff have to "go and find out" what happened only a couple of days ago - meanwhile leaving maybe hundreds of app developers uncertain about what to do?

Roll back the change. Then there's more time to identify the problem and find solutions - in a sandboxed test environment, please.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Yup, I assume this has effected hundreds of Apps. It taken Ismael a few days to look into fixing my 1 App - its much appreciated but after this App I have 6 others Im going to have to re test / fix.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Petra, Mark,

Still looking into this and really sorry about this issue.

Working on finding what's causing this.

Really sorry again everyone.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Any news ismael??? Ive not been able to do any work for days ;-(

Are PhoneGap going to roll back the update that has broken probably hundreds of Apps?????/!!!!

Is there any official statement about this?
Photo of Luuk van Rens

Luuk van Rens

  • 1 Post
  • 0 Reply Likes
Yes, build a version and send it to apple on good faith, now the freakin header is through the status bar, thanks. When will this issue be fixed. Kinda don't want my app in the store like this and still everytime i build the issue occurs. Running 2.9.0, can i even install plugins in there??? Solution?
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi All,

I have escalated this to our developers and also filing a bug report for this.

Really sorry for the delays it has caused.

Do follow the bug report link for updates.

Sorry once again everyone.
(Edited)
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Where do we follow Ismael? Thanks.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

Click on "link" in the 4th paragraph.

Sorry again.
Photo of Maz

Maz

  • 13 Posts
  • 0 Reply Likes
Status bar plugin doesn't work for me. I've built a demo and uploaded it - no luck.

App ID: 863227

Using iOS 7.1 on iPhone 5.

Kind regards,

Mario
Photo of Brett

Brett, OFFICIAL REP

  • 547 Posts
  • 54 Reply Likes
this app doesnt work for you?
Photo of Carlos Moreno

Carlos Moreno

  • 2 Posts
  • 0 Reply Likes
The plugin did not work for me. Setting a phone-gap version preference of 3.1, building, uninstalling the app from the device and then reinstalling worked though.
Photo of Henk Kelder

Henk Kelder

  • 46 Posts
  • 5 Reply Likes
First: Yesterday we tested our apps on iPad 1 using iOS 5. Worked fine with the statusbar plugin.

But secondly:

Why does nobody from PG Build make any statement whether of not this change was intentional of whether or not the old functionality - no necessity to install the plugin - will be restored? And if so, when?

It seems as if you support people are refusing to make any statements on this...?
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
I see there is still no word from PhoneGap???? Very frustrating.

Like the post above... I dont understand why its taking days to tell us what is happening. Just tell us what has changed and how to work round it.

Many of us are in the dark here with Apps that once worked and are now broke?

I pay for this service and right now im pretty frustrated at the lack of acknowledgment from PhoneGap that they have caused this issue?

ismael jimoh (Official Rep) has replied to a few of my posts but no solutions have been posted yet that work for my App (that was working fine!).

Ive tried various fixs using build 3 / 3.1 / 3.2 and 3.3

Ive tried with and without the plugin and using the plugin with and without a version number but had no luck with any of them.

To to make crystal clear. My App was working fine - PhoneGap changed something and now the status bar is broke....
Photo of Maz

Maz

  • 13 Posts
  • 0 Reply Likes
Exact same thing with me. App was working and now broke.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Any news ismael??? Ive not been able to do any work for days ;-(

Are PhoneGap going to roll back the update that has broken probably hundreds of Apps?????/!!!!

Is there any official statement about this?
Photo of Henk Kelder

Henk Kelder

  • 46 Posts
  • 5 Reply Likes
For what its worth:

I added logic to change the statusbar color:

-------------------------------------------------
try {
if (StatusBar != undefined) {
//StatusBar.hide();
StatusBar.backgroundColorByHexString("#5ab6e8");
StatusBar.styleLightContent();
}
} catch (err) {
console.log(err);
}

---------------------------------------------------

I added this code fragment at the bottom of my app.initialize function.

It did not work. The statusbar itself did not change but my footer became colored.

I tried some minor changes but it made no difference.

Finally I moved the code fragment at the top of the app.initialize.. and suddenly it worked as it should...

Weird...
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Which plugin did you use for that and which version?

Also which build version are you using 3.3?

Ive had no luck so far, looking at this thread there are many other people with the same issue that PhoneGap have dumped on us!!
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This morning, I rebuilt one of my apps, because I wanted to try the PGB3.4 version and the new .pgbomit file.
Step one: no plugin for StatusBar, just [preference name="ios-statusbarstyle" value="black-opaque" /] in the config.xml
As expected, in iOS7 the status bar turned transparent and overlapped the webview area. Buttons in the header bar ('back' and 'menu' in my case) could hardly be tapped anymore.

Step two: I added [gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" /] to the plugin list in config.xml. Nothing more. No Javascript to change the status bar's background color.
This rendered the status bar black, opaque and into the top part of the display, not overlapping the webview in iOS7. Just as usual before last week.

Note: I only tested in iOS7.1 on iPhone4 (A1332) so far. Will test more, but wanted to comment to this thread as soon as possible.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Thanks for the update Petra, Henk, Mark.

I have filed a bug report for this, should be fixed soon.

Thanks for the patience.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
@Petra V. - I followed the same steps - used build 3.4, added the plugin com.phonegap.plugin.statusbar" version="1.1.0"

This time I get the status bar at the top (not bottom) but its the pink / purple color - also seems to be too deep - like about 40px deep.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Also just tried using the preference with 'default' - doesn't change anything.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi Mark,

I tested all those also.

It isn't that it isn't working with your app, it's more like something overlays the status bar.

Note that the colour of text changes when you change the various background colour.

Tried looking through all possible causes couldn't find one.
Photo of Henk Kelder

Henk Kelder

  • 46 Posts
  • 5 Reply Likes
com.phonegap.plugin.statusbar with PG B 3.3.0
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Hi all, here's a demo app which uses the StatusBar plugin to prevent StatusBar overlay:

https://github.com/wildabeast/PhoneGa...

We're not entirely sure what changed on Build to cause any recent changes in behaviour -- but moving forward you should use that plugin to configure your StatusBar.

Let us know if you still have problems -- and if so please share an App ID so that we can look into your specific app.
Photo of Ryko Solutions

Ryko Solutions

  • 10 Posts
  • 0 Reply Likes
Simply including com.phonegap.plugin.statusbar resolved it in my app. The statusbar background is black with no option to change it, but that's acceptable for my app.

Tested with:
PhoneGap v3.4
iPhone4s / iOS 6.1.3
iPhone4s / iOS 7.1
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
The statusbar background is black with no option to change it, but that's acceptable for my app.


Did the apis for changing the status bar color not work for you?
Photo of Ryko Solutions

Ryko Solutions

  • 10 Posts
  • 0 Reply Likes
I tried using the config.xml preference to set the background to light blue (just to test), and it had no effect. That was expected since the plugin states that those preferences don't work with PhoneGap Build.
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
HI Ryko,

You can use the colour change described ; could be added to your JavaScript to achieve this.

Hope that helps.
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Yes I assume you're trying to use the StatusBarBackgroundColor preference -- it is not supported by PhoneGap Build, as explained in the documentation. Use JavaScript.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Ismael / Ryan,

This issue was opened and closed here:
https://github.com/phonegap/build/iss...

BUT I think it needs to be reopened - can you do that?

My status bar is still showing strange behavior - its still transparent for a split second then goes black but the whole page jumps down, mp apps never did this before therefore the issue isnt quite fixed yet!

Thanks, Mark.
Photo of Tony Slack

Tony Slack

  • 11 Posts
  • 1 Reply Like
I'm using PhoneGap 3.3, and my iOS app exhibited this problem.
I added the following line to my config.xml file:

<gap:plugin name="com.phonegap.plugin.statusbar" />

This gave a black status bar outside my webview.

Good luck to everyone else having this problem.
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Do you see the jumping behavior - when the app loads is the status bar transparent for a split second then goes black and the page jumps down?
Photo of Mark Latham

Mark Latham

  • 203 Posts
  • 5 Reply Likes
Any news on this issue??
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Official Response
A fix / workaround for this has been posted here.

Closing this thread. If new issues come up, create a new thread.

This conversation is no longer open for comments or replies.