Trouble with status bar on iOS 11

Ionic Framework ionic-v3
1

Hi there!

I’m so close to finishing up my Ionic 3 app. It’s been an amazing process. Many thanks to the Ionic team :pray:t3: !!

So I’ve been having so much trouble with the status bar Cordova plugin on iOS. No matter the various settings I’ve tried, i always seem to get a white bar (on top or bottom).

Anyone had this problem that can lend some advice?

Cheers!

0C948837-4B83-4B78-A2AB-8F366DAD81F3
0C948837-4B83-4B78-A2AB-8F366DAD81F3.jpeg750×1334 101 KB

1 Like
2

Also relevant is the conflicting transparent ion-nav bar with the status bar on top!

3

Same problem here :frowning:

4

I solved it (somewhat). Start with these steps:

  1. Replace the standard cordova status bar plugin with the latest version on github (it takes a while to get into the Cordova standard library):

Latest version: https://github.com/apache/cordova-plugin-statusbar

  1. Remove the cordova-wkwebview-engine plugin (if you have it) and install cordova-plugin-ionic-webview. It’s an Ionic-built extension of the wkwebview plugin.

  2. Make sure that you have the meta viewport tag set to viewport-fit=cover in your index file. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">

From there, I actually ended up disabling the status bar completely, because in certain cases I still got inconsistent behavior. But these steps allowed me to get a clean app without the status bar.

Hope it helps.

3 Likes
5

Hi, I’m having this problem on iOS 11 as well. Thanks for clearly laying out the steps. Just to clarify, I:

  • Removed the cordova status bar plugin with $ sudo ionic cordova plugin rm cordova-plugin-status-bar
  • Added the latest version of the cordova status bar plugin with $ sudo ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
  • Already had the cordova-plugin-ionic-webview plugin installed
  • Already had the meta viewport tag set to viewport-fit-cover: <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">

If I understand correctly, the only thing that I effectively did was update to the latest version of the cordova-plugin-status-bar. I haven’t done any testing, but I also don’t have a way to test the app in iOS 11 (this problem only showed up after I submitted to the app store.) Could this just be a recent update for iOS 11 or is it possible that my problem is something else?

I’ll update on my progress with respect to this issue as things progress.

1 Like
6

Almost certain it’s iOS 11 as my status bar was grey last week before updating to iOS 11. Now it’s white and, like the original poster, I’ve tried every possible combination of settings to no avail.

7

Did anybody find a solution (except hiding the status bar)?

8

This fixed it for me:
ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
Thanks dgbiggs!

9

This worked for me:
Installing the latest version of https://github.com/apache/cordova-plugin-statusbar
And setting this in config.xml:

<preference name="StatusBarOverlaysWebView" value="false" />

1 Like
10

No need to install it from git anymore I think, it has been release now

http://cordova.apache.org/news/2017/11/10/plugins-release.html

11

I spent whole afternoon debugging for the status bar and found that I didn’t uncomment the following line in index.html.

<!-- cordova.js required for cordova apps (remove if not needed) -->
<!--<script src="cordova.js"></script>-->

I was developing PWA at first with ionic. I start migrating my PWA to app then facing this issue.