Ion-header height too tall on iPhone 15

Ionic Framework ionic-v3
1

This just started happening to me when I used a new device (iPhone 15, ios 17.4).
It works fine on: iPhone 8, iPhone SE, web browser, Android (have not tested on a large Android device).
I have not changed any code. It may have always had this issue on larger iPhones but I don’t think so.

I am running @ionic/angular": “^6.4.2”

image
image942×838 115 KB

2

Have you inspected in DevTools to see where the space is coming from? My guess is safe area padding.

3

I’m not sure how to do that when it is running on an iOS mobile device.
I will have a google.

4

I’m sure you found it by Googling, but I mention how to over here Capacitor Javascript Chart.js - #2 by twestrick

5

Thanks for that. Got it sorted using this in the global.scss

ion-header ion-toolbar:first-of-type {
  padding-top: 0!important; 
}