Iphone X space after Header

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.

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">


  <ion-toolbar color="primary">

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


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 

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.

1 Like