Fixing the transparent ios7 status bar for phonegap and jquery mobile

Update 2014-04-24: Using Phongap 3.4.0 this seems to have changed into a plugin. So here’s how to fix it:

In config.xml add:

<gap:plugin name="com.phonegap.plugin.statusbar" version="1.1.0" />
<preference name="StatusBarOverlaysWebView" value="false" />

Update: when building with phonegap 3.0.0 using phonegap build this issue no longer appears, so it seems to have been a bug in phongap that is now fixed

With the release of ios7 there was a change to the status bar, it seems to be part of the app instead of being a separate area above the app. For phonegap users this means that the status bar suddenly is placed with transparent background on top of the app content.

I guess the real solution is that phonegap handles this and implements control of this by settings, but as a temporary workaround here’s my solution for phonegap ans jquery mobile.

Attach to the phonegap pageinit event, and detect ios7 from userAgent. Add css class to the body and a div:

$( document ).on( "pageinit", function( event ) {
	if (navigator.userAgent.match(/(iPad|iPhone);.*CPU.*OS 7_d/i)) {
		$("body").addClass("ios7");
		$('body').append('<div id="ios7statusbar"/>');
	}
});

And css for that:

#ios7statusbar
{
    width:100%;
    height:20px;
    background-color:white;
    position:fixed;
    z-index:100;
}

.ios7 .ui-page
{
    margin-top: 20px;
}

I’ve seen solutions where you detect ios7 using phonegap instead of the userAgent, but the you have to wait longer to the deviceready event and there will be an annoying glitch.

Also I have seen solutions where style is added to .ui-page, but that gets overwritten when using multi-pages in jquery mobile.

Also I have seen solutions where no fixed div is added, but then when you scroll the status bar end up on your content again.

  • http://www.andrearota.com Andrea Rota

    Cool, it’s working! Let’s see if Apache will fix it.

  • http://www.catering-guides.de Benjamin

    thanks for the good hint!
    I just had to specify additional margins to the header and panels:


    .ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane {
    margin-top: 20px;
    }

  • http://www.catering-guide-hamburg.de Benjamin

    while testing different hardware devices, I found another improvement.
    e.g. the iPod touch sends “iPod touch” as user agent. For a more robust client detection, the regexp / condition should be adapted to:

    if(navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_d/i)) {
    ...
    }

  • patricia Mckay

    this works great , the only issue is with the header being set to fixed it doesn’t work.. any ideas?

  • zac

    Thanks for that! Maybe it’s worth mentioning:

    First, it wasn’t working on the first page, then I realized that the reason for that is that the ‘pageinit’ event fires before the ‘deviceready’ event, and I was adding the ‘pageinit’ event handler on the ‘deviceready’ listener. So I just moved that event handler and everything is fine now.

  • Dilip

    Nice one. Working fine to me.
    -Thanks.