Iphone X space after Header in Ionic 3

Issue

I did all the needed updates and added the needed code to meta in index.html, but I still get white space at the bottom of the header before the content section starts. Please see screenshot. Also, it appears like the Title is being cut.

Here is my meta:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

My HTML:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Saved</ion-title>
  </ion-toolbar>
</ion-header>

My Ionic Info: cli packages:

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.6
Cordova Platforms  : ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

System:

ios-deploy : 1.9.2 
ios-sim    : 5.0.12 
Node       : v7.10.0
npm        : 4.2.0 
OS         : macOS High Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Solution

So my problem was that in App.scss I've explicitely changed the height of the Toolbar as follows:

.toolbar-background-ios { 
  background: #ffffff;
  height: 70px;           //This was the problem
}

By removing the height attribute, all works perfectly well for oth iPhone X and older iPhone 7 plus.

Answered By - Dimitri