Ion-header disappears only on iPhone simulation

[Patsch36]

My ion-header is cropped-off on my iPhone simulation:

On an iPad Pro Simulation, it works, but I feel a little bit is cropped-off:

The Web View just works fine:

My Pages Code is the boiler-plate code of the wiki:

<style scoped>
  .example-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
</style>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Listen now</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="example-content">Listen now content</div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
  import { IonHeader, IonToolbar, IonTitle, IonContent, IonPage } from '@ionic/vue';

  export default {
    components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  };
</script>

I use vite + vue and vue-router for routine:

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom" class="ion-padding-bottom">
        <ion-tab-button tab="home" href="/home">
          <ion-icon :icon="home" />
          <ion-label>Listen now</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="kalender" href="/kalender">
          <ion-icon :icon="calendar" />
          <ion-label>Kalender</ion-label>
        </ion-tab-button>
  
        <ion-tab-button tab="ernährung" href="/ernaehrung">
          <ion-icon :icon="analytics" />
          <ion-label>Ernährung</ion-label>
        </ion-tab-button>
  
        <ion-tab-button tab="profil" href="/profil">
          <ion-icon :icon="personCircle" />
          <ion-label>Profil</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>
  
<script lang="ts">
  import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/vue';

  import { home, analytics, personCircle, calendar } from 'ionicons/icons';

  export default {
    components: { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonLabel, IonIcon },
    data() {
      return {
        home,
        analytics,
        personCircle,
        calendar
      };
    },
  };
</script>

Do you have any suggestions why the header behaves so strange?
I would be eternally grateful for help.
Warm regards
Patrick

[twestrick]

It looks like the default Safe Area Padding is not being applied. I would look at what --ion-safe-area-top is set to in Dev Tools.

[aaronksaunders]

I think you are missing wrapping your tabs page’s content

<template>
  <ion-page>
    <ion-content> <==
      <ion-tabs>
        <ion-router-outlet></ion-router-outlet>
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="tab1" href="/tabs/tab1">
            <ion-icon :icon="triangle" />
            <ion-label>Tab 1</ion-label>
          </ion-tab-button>

          <ion-tab-button tab="tab2" href="/tabs/tab2">
            <ion-icon :icon="ellipse" />
            <ion-label>Tab 2</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-content> <==
  </ion-page>
</template>

[pslyman]

It’s worth noting your screenshot where it’s working has the MD styles, not the iOS styles. In your browser, inspect and select an iOS device to simulate then refresh the page. You’ll get a more accurate representation.