iPhone X statusbar overlays onto shared header component

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:

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




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

    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:


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?