Safe-area css ios issue

Hello,
I have an Ionic v6.2 angular 14 app and this is my android and ios view:
ANDROID:

IOS:

This is my code:

<ion-content *ngIf="(currentUser$ | async) as currentUser" class="page">
<ion-header>
  <ion-toolbar mode="ios" color="primary">
      <ion-title>{{currentUser.profile_name}}</ion-title>
      <ion-button slot="end" id="parameters-button" (click)="onGoToParameters()">
        <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
      </ion-button>
    </ion-toolbar>
  </ion-header>
  <div class="sub_header">
</div>
</ion-content>

As you can see, my ion-header is under/overlay by the statusbar and the notch.
I have tried --ion-safe-area-top but it seems equal to 0 with iphone13…
If someone has a answer… please

7 posts - 5 participants

Read full topic