Ionic modal header moves under the status bar in iOS

Ionic Framework ionic-v3
1

I’m using a modal to get some input and that modal has a header with custom buttons on the top. My HTML for the modal works just fine on Android. And there are no issues with the header and status bar anywhere else in the app in both iOS and Android when running on the device.

But on iOS, the header on the modal is moving under the status bar. Just on the modal screen.

Anyone know how to fix this?

This is my HTML and I’m using Ionic 2 - Beta 11.

<ion-header>
      <ion-navbar>
        <ion-buttons start>
          <button (click)="customClick()">Custom Button</button>
        </ion-buttons>

        <ion-title> Title </ion-title>
        <ion-buttons end>
          <button (click)="customClick2()">Custom Button 2</button>
        </ion-buttons> 
      </ion-navbar>
    </ion-header>

    <ion-content padding> 
        Content area
    </ion-content>
2

I have the same issue.