Ionic 4 - iOS status bar overlaps top tabs - ios

Question

I'm trying to create a tabs bar at the top of my app, with no obvious header, but the iOS status bar is overlapping it. I've tried wrapping the ion-tabs tag in an ion-content tag that has padding but that didn't work. I wrapped the tabs in a header which fixed the padding issue, but then the pages loaded by the tab disappeared inside the header.
I've seen all the posts about headers being overlapped but those were years ago, that's been fixed in ion 4, and the solutions don't work for tabs anyways.
How can I solve this without removing the status bar?
iOS version: 11.4.1
ionic version: 4.0.5
Recreating:
Create the ionic tabs starter project
Change the tabs placement to top
Remove the header in home.html
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Answer 1

After reading and playing with #Bilow's answer, I found it sufficient to simply add margin to the ion-tabs element as a whole, like so:
ion-tabs {
margin-top: var(--ion-safe-area-top);
}
This added space for the status bar on iOS. On Android, which was already behaving properly, nothing changed, so this fix works cross-platform.

Answer 2

It seems that tabs are just hard to work with. I found a work around by using segments. I'll just need to spend some time to stylize them to look right.
Here is my new app.html code:
<ion-header>
<h2></h2>
<ion-segment [(ngModel)]="page" (ionChange)="segmentChanged($event)">
<ion-segment-button value="home">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button value="about">
<ion-icon name="information-circle"></ion-icon>
</ion-segment-button>
<ion-segment-button value="contacts">
<ion-icon name="contacts"></ion-icon>
</ion-segment-button>
</ion-segment>
</ion-header>
<ion-content>
<ion-nav [root]="rootPage"></ion-nav>
</ion-content>
Having segments in the header worked for me, but in order to get the padding I needed I had to add an empty h2 tag. If there's a better way feel free to let me know, for now I'm happy with this.
For those of you that would like to do something similar I found the answer, posted by rapropos, here:
https://forum.ionicframework.com/t/having-a-hard-time-understanding-the-navigation-with-tabs/92918/9

Answer 3

With just a little bit more effort you'll able to keep using the ion-tabs. This is what I've came up with:
Add to your global scss (or wherever needed)
global.scss
.plt-ios {
ion-tab-bar {
padding-top: var(--ion-safe-area-top);
}
ion-header ion-toolbar.noSafeAreaPaddingTop{
padding-top: 0 !important;
}
}
Add the 'noSafeAreaPaddingTop'-class to every tab page using the ion-toolbar
YourPageTemplate.html
<ion-header>
<ion-toolbar class='noSafeAreaPaddingTop'>
<ion-title>Tab page title</ion-title>
</ion-toolbar>
</ion-header>
...
I'm not verry happy with this method neither, but it works with ion-tabs..

Answer 4

A better solution was obvious:
<ion-header>
<h2></h2>
</ion-header>
<ion-content>
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
</ion-content>
I'm not sure why that took me so long to figure out...