iPhone X statusbar overlays onto shared header component

Ionic Framework ionic-v3
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:

19
Screen Shot 2018-08-13 at 12.39.19.jpg862×1680 117 KB

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() { }
}

35
Screen Shot 2018-08-13 at 12.39.35.jpg856×1698 66.4 KB

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?

2

The Very first thing to check is the Meta that should be like this

name=“viewport” content=“viewport-fit=cover, width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1”

And if it does not resolve your issue then try to update the status bar plugin. Run the following command.

but before doing that remove the previously installed status bar plugin and then install the above it will surely fix your problem.

References GitHub link : https://github.com/apache/cordova-plugin-statusbar.git

If the issue still Persists then Kindly check your Global.SCSS file and look for the following

  • .platform-ios.platform-cordova:not(.fullscreen) and find the toolbar-ios in that and adjust the header properties according to your requirements.