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:

#wl_ios7bar{
    display: none;
}
body.wl_ios7{
     padding-top: initial;
}

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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