Cordova iOS white bar at top

Question

After adding StatusBarOverlaysWebview to config.xml, i get a white bar at the top of the screen and all the content is pushed down (see screenshot - there is a white bar on top of the statusbar). So instead of just adding the statusbar height (20px) to the screen, it adds 40px.

I double-checked all my styling and everything looks fine, so i guess its caused by the plugin somehow. Can anyone tell me how to solve this?

This is my config:

<preference name="StatusBarOverlaysWebview" value="false" />
<preference name="StatusBarBackgroundColor" value="#FF543E" />
<preference name="fullscreen" value="true" />

This is what it looks like without setting a color and using window.StatusBar.overlaysWebView(false); instead of config.xml

Answer 1

Try this, below code is working for me:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#2D81C1" />
<preference name="Fullscreen" value="false" />

if you still have problem and if the same code was working for you in the previous builds, please check if plug in is installed and working properly

Update: For iOS 11 and iPhone X there are some changes in the library and HTML meta tags

In index.html change meta tag to this:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Please update ionic-angular library also for the latest devices support

More information here: iOS 11 ionic checklist

Answer 2

This appears to be a bug with the way Cordova handles iOS 11's statusbar. As a fix, you can put

    <meta name="viewport" content="viewport-fit=cover">

in your index.html.