Status Bar on iOS Background Color

Question

I’m having a hard time setting the iOS status bar background color to transparent. I’m using the latest version of cordova statusbar and ionic, and leaving everything to their default setting, however i’m getting a white background color for some reason. How can i set the background color to transplant, i though this is the default value anyhow.

Bowne

There is a plugin to do that cordova.apache.org/docs/en/latest/reference/… – Intenerate

Answer 1

Okay so after referring to:

• https://issues.apache.org/jira/browse/CB-12886 and
• https://issues.apache.org/jira/browse/CB-12890

The issue occurs in iOS 11, and cordova-ios-4.5.0 and is simply solved by adding the cover value to viewport-fit as follows in your index.html:

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

Bowne

Was just coming here to say that. It's new to iOS 11 -- I got caught by the same problem. – Counterforce

Answer 2

This worked for me:

1. Run cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

2. config.xml Add <preference name="StatusBarBackgroundColor" value="#" /> inside <platform name='ios'> tag

3. index.html Add <meta name="viewport" content="viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />

4. Save.

5. Launch the simulator.

Hallucination

Answer 3

As maintained by luckystarr. Plugin cordova-plugin-statusbar will help you achieve what you want to do.

After adding plugin add following preference in config.xml to get black background

<preference name="StatusBarBackgroundColor" value="#000000" />

To change the color of icons and text in status bar you can use

<preference name="StatusBarStyle" value="lightcontent" />

Available values are default, lightcontent, blacktranslucent, blackopaque.

Subgenus

I tried both, but looks like they are completely ignored, even when i change the setting from XCode directly – Bowne

Answer 4

Please check Following

window.cordova.plugins.StatusBar.overlaysWebView(false);

It worked for me.

Bimolecular

Answer 5

If you are using statusbar plugin, you should also update it to latest version (2.3.0 has just been released). This new version of the plugin handles the iPhone X notch.

BTW, the problem has nothing to do with the cordova-ios version, it's a new "feature" of the WebView when you compile the apps with iOS 11 SDK (it won't appear if you use Xcode 8 as it uses SDK 10). viewport-fit=cover is the way to go for removing this fake statusbar.

Championship