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 :cry:

try to add in your global.scss file this:

.safe--area {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  --ion-safe-area-top: 20px;
  --ion-safe-area-bottom: 20px;
}

and add the class “safe–area” where you need it (of course you can change those pixels values)

What if status-bar is heigher than 20px for iphone 13 for exemple ?

try to increare that value with a “default” one, maybe you can try 25?

move the header tag outside of the ion content.

1 Like

Hi @baddoyz,

@Hills90210 is right. Please move the <ion-header> out of the <ion-content>.
The only time you are allowed to put the header into the content is when you use the large title header.

You should also wrap the <ion-button> into a <ion-buttons> container:

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

In my case I’m running a web app on iPhone X, I’m trying to add a padding on top to push my body to the safe area using the safe area css attributes of Webkit padding-top: constant(safe-area-inset-top); and padding-top: env(safe-area-inset-top);. However the web view doesn’t evaluate correctly these attributes and it’s always set to 0. What should I dod to make it work ! code :

```
body {
padding-top: 44px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}


[![enter image description here](https://i.stack.imgur.com/HNP2j.png)](https://i.stack.imgur.com/HNP2j.png)

[![enter image description here](https://i.stack.imgur.com/LTeEs.png)](https://i.stack.imgur.com/LTeEs.png)

Good Luck !!
1 Like