iPhone X statusbar overlays onto shared header component

#1

I have seen various similar posts with the problem of the iOS status bar overlaying onto the header of apps.

I haven’t yet seen another post which has the same problem as mine.

I am trying to use a shared header component for certain pages and when I use this, I get the overlaying problem.

I have simplified the code and recreated my problem using the ionic tabs starter template:


This page is using a shared header component:

<ion-header>
  <shared-header title="Home - shared header"></shared-header>
</ion-header>

shared-header.component.html

<ion-navbar>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

shared-header.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'shared-header',
    templateUrl: 'shared-header.component.html'
})

export class SharedHeaderComponent {

    @Input('title') title: string;
    constructor() { }
}


This page is not using the shared header component:

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

Why would this be happening? Is it because of the extra <shared-header></shared-header> tags? If so, what can be done to solve this?