Safe-area css ios issue

Ionic Framework
1

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

image
image411Ă—684 33.7 KB

IOS:

image
image934Ă—2043 92.3 KB

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:

2

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)

3

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

4

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

5

move the header tag outside of the ion content.

1 Like
6

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

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
8

Below change fixed my problem.
env:
Ionic 6.x
IOS 16.x

/global.scss
ion-content {
–padding-top: var(–ion-safe-area-top, 0);
}

1 Like
9

Hello friends, everything okay? I am having a problem, specifically with Android 7 on a Motorola Moto E Plus device. The strange thing is that sometimes the header appears correctly and other times it is cut off. When I try to apply the solutions posted here, it doesn’t work. Can anyone give me any more tips?

Info Ionic.

Ionic:

   Ionic CLI                     : 6.20.8 (/Volumes/home/.nvm/versions/node/v14.20.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.5.1
   @angular-devkit/build-angular : 14.2.10
   @angular-devkit/schematics    : 14.2.10
   @angular/cli                  : 14.2.10
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 11.0.0, ios 6.2.0
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 26 other plugins)

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.1

System:

   Android SDK Tools : 26.1.1 (/Volumes/Caches/Android)
   ios-deploy        : 1.12.1
   ios-sim           : 8.0.2
   NodeJS            : v14.20.1 (/Volumes/home/.nvm/versions/node/v14.20.1/bin/node)
   npm               : 6.14.17
   OS                : macOS Monterey
   Xcode             : Xcode 13.4.1 Build version 13F100