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

Question

This question already has an answer here: question from:https://stackoverflow.com/questions/65851554/ionic-5-ion-searchbar-in-header-overlapping-with-status-bar-in-ios

Answer 1

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