Fix double-offset status bar in Ionic and MFP for iOS 7+

Ionic has automatic functionality for offsetting content to allow for iOS 7+’s transparent status bar, and MFP also introduces logic for this behaviour.

The combination of these two corrections leads to an over-correction, with ion-nav-view content floating 22px below the status bar.

You can fix this by editing the iphone/css/main.css file and replacing the #wl_ios7bar and body.wl_ios7 rules with the following:

    display: none;
     padding-top: initial;

NB. This does not show itself on projects that use Ionic’s ion-side-menus pattern.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s