Ionic 3 splashscreen bottom gap on Iphone X and load twice

Question

I am update my xcode to 9 and build the app, discover that the splashscreen will display twice and the iphone X will have the bottom gap in the first displayed splashscreen, below is the image:

And then will load the splashscreen secondly with no bottom gap:

My info is :

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.15.2
ionic (Ionic CLI) : 3.15.2
global packages:

cordova (Cordova CLI) : 7.1.0 
local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.3.0 ios 4.5.3
Ionic Framework    : ionic-angular 3.8.0
System:
ios-deploy : 1.9.2 
ios-sim    : 5.0.13 
Node       : v7.10.0
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.0.1 Build version 9A1004 
nvironment Variables:

ANDROID_HOME : not set
Misc:

backend : legacy

Does anyone know how to solve it? Thanks a lot.

Answer 1

UPDATE: There is now a stable version available. In 4.5.4 the issue has been fixed.

ionic cordova platform rm ios
ionic cordova platform add [email protected]

---

OLD ANSWER:

Wait for the next version of cordova-ios. It will be fixed then. Until then try the following workaround:

ionic cordova platform rm ios
ionic cordova platform add ios@nightly

Source: https://forum.ionicframework.com/t/ionic-3-splashscreen-bottom-gap-on-iphone-x-and-load-twice/111254/8