[Ionic v4] ion-header ion-toolbar height to big on iPhone 6s

[peterpeterparker]

Ionic Info
@ionic/angular: "4.0.0-beta.1"

Describe the Bug
The ion-header ion-toolbar height is too big on iPhone 6s / iOS 11.4

As you could see in the enclosed screenshot, the height is bigger than 44px

Source of the problem is the fact that --ion-statusbar-padding is set to 20px; (see
https://github.com/ionic-team/ionic/blob/fd8f875a5f9bf4435f214b77a703ca8efce12501/core/src/components/app/app.ios.scss)

I didn't tried Android but I guess same problem since the padding is also set to 20px; (
https://github.com/ionic-team/ionic/blob/fd8f875a5f9bf4435f214b77a703ca8efce12501/core/src/components/app/app.md.scss)

Expected Behavior
A correct header size on devices

Code

<ion-header>
  <ion-toolbar>
    <ion-title>SOMETHING</ion-title>
  </ion-toolbar>
</ion-header>

Screenshot

[pvskasyrskiy]

I have the same issue at android

[peterpeterparker]

All good with v4.0.0-beta2, thx a lot 👍

[doender]

I have encountered this issue again in 4.0.0-beta.6 due to this CSS rule:

ion-header ion-toolbar:first-child {
   padding-top: var(--ion-safe-area-top,0);
}

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.