Black bottom bar on iPhone X, disappears after keyboard slide up

Hi there,

I have this problem that’s been bugging me for few days, I’m new to Ionic. I’m trying to optimize the app for iPhone X.

When I boot up the app, it has this black area at the top of the screen, it disappear after the keyboard slide up, and the app looks fine even after I dismissed the keyboard. How to I fix this problem?

Appreciate your input guys, here’s a short video

Video: https://cl.ly/41cc3b8e3141

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.8

Cordova:

   cordova (Cordova CLI) : 7.0.0
   Cordova Platforms     : android 7.1.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 6 other plugins)

System:

   NodeJS : v8.12.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS

Sorry to bump this post, still can’t figure out this problem…