Ion-Header Overlaps Status Bar and Ion-tab-bar cropped in iOS

Question

I have an Ionic 6 app with Vue3. I am using the tabs component in my app.

My App.vue is as follows

    <template>
      <ion-app>
        <ion-router-outlet />
      </ion-app>
    </template>

I have a tabs page MemberPage.vue as follows with a header component to dynamically display the route name

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>{{ route.name }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-tabs v-if="member_profile">
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom" color="primary">
        <ion-tab-button :tab="tab.name" :href="tab.path" v-for="tab in member_tabs" :key="tab.name">
          <ion-icon aria-hidden="true" :icon="tab.icon" />
          <ion-label>{{ tab.name }}</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

I have individual pages for the tab routes with the following structure of components

<template>
  <ion-page>
    <ion-content v-if="dataLoaded">
      some other components
    </ion-content>
  </ion-page>
</template>

With the above code, the toolbar title does not appear in the app and also notice how tabs too close to the rounded corners of the device and cut as you can see in the image below.

How can i address this ?

The header is displayed correctly in the Android App. I have put the app on test flight and checked on a physical ios Device as well, and thus not an issue with emulator as well.

Answer 1

@thezohaan in most cases 'ion-safe-area-bottom' will be 0 on those android devices, and therefore won't change anything. But you can always apply styles to ios-only using ios class selectors. in your css you need to target the tabbar class and add a ios class to it. Something like this:

.tabbarclass .ios{
    padding-bottom: 0 + --ion-safe-area-bottom;
}

see: https://ionicframework.com/docs/theming/platform-styles