Header bar title issue on iOS


I am having an issue on iOS (both xcode emulator and device) . The title is not correctly displayed in the header-bar (screenshot on the left side).

My code is for the header-bar is :

        <ion-nav-bar class="bar-light">
            <ion-nav-back-button class="button-clear"></ion-nav-back-button> 

Note that on Chrome / Firefox and the Android emulator + device (screenshot on the right side), everything’s perfect.

Does anyone have any idea how to fix this :blush: ?


If anyone has the same problem, I solved it following these 2 steps

  1. Install the cordova status bar plugin https://github.com/apache/cordova-plugin-statusbar
  2. In the “run” method of your app, add “StatusBar.overlaysWebView(false);”
  3. Override the SASS variable $ios-statusbar-height and set it to 0px (last line of "lib/ionic/scss/_variables.scss)

i try this but don’t work =(

I have the same issue for weeks and just fixed right now. I put the following line in config.xml instead of the “run” method.

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

And then I also remove cordova-plugin-statusbar and install it again.