Ionic bar-header not centered when running on iOS device

Question

I am building an app for Android and iOS using Ionic.
I use bar-header for titles in my views:

<ion-view view-title="Home" class="tab-home">
    <ion-content class="padding">
        <div class="bar bar-header bar-positive">
            <div class="h1 title">The European Experience</div>
        </div>
        <div class="bar bar-subheader bar-stable">
            <h2 class="title">Companion App</h2>
        </div>
        <div class="content has-header padding">
            ...
        </div>
    </ion-content>
</ion-view>

When displayed in my browser with ionic serve -l, the header is correctly displayed:

When running on a real Android device, it works as well: But when I run the app on an iOS device (either physical or on Simulator), the title is not vertically centered:

I tried adding CSS to explicitly specify vertical-align or text-align, but without success.

What could explain this issue? And how can I center the title inside this header?

Answer 1

This sort of problem is common depending on which Ios / Ionic versions you use , Did you try using the Tag ? ion-header-bar