Ionic 5 ion-searchbar in header overlapping with status bar in ios

Issue

In my Ionic 5 application I have a ion-searchbar in the header. It is overlapping with the status bar in ios.

page.html

<ion-header>
  <ion-searchbar clearIcon="close-sharp" [(ngModel)]="searchTerm"
    debounce="1500" showCancelButton="true" (ionChange)="onSearch()" (ionCancel)="toggleSearch()">
  </ion-searchbar>
</ion-header>

I have tried by putting it in ion-toolbar. The result is same.

app.component.ts

this.statusBar.styleDefault();

I have tried statusBar.overlaysWebView(false) but is didn't work.

index.html

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Solution

As stated this question has been answered. However what is missing from that answer is that you may need to support both older and newer iOS devices. This is what fixed it for me:

 @media(orientation: portrait) {
     ion-content {
      padding-top: constant(safe-area-inset-top); //ios 11.2
      padding-top: env(safe-area-inset-top); //ios 11.1
   }
 }

Answered By - E. Maggini