AngularJs IOS11 IPhoneX. Splash Screen Not Cover when load

Hi guys I just done all the IOS 11 Check List
update ionic, bower, ionic-angular
also update my resource file with the 2732 splash screen

But when I open My app on IphoneX simulator, the splash screen “safe-area bottom shows white for 1-2sec” then it was stretch down to fit the screen. So it actually look like my splash screen was hopping down.

This only happens on IphoneX
from


to
39 PM
then it opens the apps like normal

My Config.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="" version="2.2.7" xmlns="https://www.w3.org/ns/widgets" xmlns:cdv="https://cordova.apache.org/ns/1.0">
  <name></name>
  <description>
    
  </description>
  <author email="" href="">
    
  </author>
  <content src="index.html"/>
  <allow-navigation href="*/*"/>
  <access origin="*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="mailto:*"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="https://maps.google.com/*"/>
  <preference name="StatusBarOverlaysWebview" value="false"/>
  <preference name="StatusBarBackgroundColor" value="#00CE6F"/>
  <preference name="StatusBarStyle" value="lightcontent"/>
  <preference name="orientation" value="portrait"/>
  <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="FadeSplashScreen" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <preference name="ScrollEnabled" value="false"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="false" value="CDVStatusBar"/>
  </feature>
  <platform name="ios">
    <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640"/>
    <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750"/>
    <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242"/>
    <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208"/>
    <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048"/>
    <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732"/>
    <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024"/>
    <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536"/>
    <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048"/>
    <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768"/>
    <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640"/>
    <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320"/>
    <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732"/>
    <hook type="before_plugin_add" src="scripts/before_plugin_add/010_git_checkout_push_plugin.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/010_add_platform_class.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/030_copy_ios_assets.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/050_update_platform_config.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/060_delete_files.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/070_optimize_images.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/080_change_app_name.js"/>
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-40@3x.png" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/>
    <icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-83.5@2x.png" width="167" height="167"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/>
    <icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/>
  </platform>
  <platform name="android">
    <preference name="android-targetSdkVersion" value="24"/>
    <access launch-external="yes" origin="tel:*"/>
    <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png"/>
    <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png"/>
    <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png"/>
    <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png"/>
    <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png"/>
    <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png"/>
    <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png"/>
    <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png"/>
    <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png"/>
    <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png"/>
    <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png"/>
    <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png"/>
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <hook type="before_plugin_add" src="scripts/before_plugin_add/010_git_checkout_push_plugin.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/010_add_platform_class.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/020_copy_android_assets.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/040_change_android_version_code.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/050_update_platform_config.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/060_delete_files.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/070_optimize_images.js"/>
    <hook type="after_prepare" src="scripts/after_prepare/080_change_app_name.js"/>
  </platform>
  <plugin name="cordova-plugin-ionic-webview" spec="^1.1.11"/>
  <plugin name="cordova-plugin-app-version" spec="https://github.com/whiteoctober/cordova-plugin-app-version#0.1.9"/>
  <plugin name="cordova-plugin-google-analytics" spec="0.8.1"/>
  <plugin name="cordova-plugin-device" spec="1.1.5"/>
  <plugin name="cordova-plugin-splashscreen" spec="4.0.2"/>
  <plugin name="cordova-plugin-statusbar" spec="https://github.com/apache/cordova-plugin-statusbar.git"/>
  <plugin name="ionic-plugin-keyboard" spec="2.2.1"/>
  <plugin name="cordova-plugin-inappbrowser" spec="1.7.0"/>
  <plugin name="cordova-plugin-x-toast" spec="https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin#2.6.0"/>
  <plugin name="cordova-plugin-geolocation" spec="2.4.2"/>
  <plugin name="cordova-plugin-compat" spec="1.1.0"/>
  <plugin name="cordova-plugin-network-information" spec="1.3.2"/>
  <plugin name="cordova-plugin-facebook4" spec="1.7.4">
    <variable name="APP_ID" value="1676340549275448"/>
    <variable name="APP_NAME" value="sharetransport"/>
  </plugin>
  <plugin name="cordova-plugin-whitelist" spec="1.3.2"/>
  <plugin name="com.verso.cordova.clipboard" spec="https://github.com/VersoSolutions/CordovaClipboard"/>
  <plugin name="cordova-plugin-x-socialsharing" spec="https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin#5.1.7"/>
  <plugin name="cordova-plugin-badge" spec="0.7.4"/>
  <plugin name="cordova-plugin-app-event" spec="1.2.0"/>
  <plugin name="phonegap-plugin-push" spec="1.10.2">
    <variable name="SENDER_ID" value="131005794674"/>
  </plugin>
  <plugin name="com.xmartlabs.cordova.market" spec="https://github.com/xmartlabs/cordova-plugin-market#v1.2.0"/>
  <plugin name="cordova-plugin-apprate" spec="1.3.0"/>
  <icon src="resources/ios/icon/icon-small@3x.png"/>
</widget>

Duplicate iPhone X Splashscreen Error

Open issue https://issues.apache.org/jira/browse/CB-13411

1 Like

thanks for the direction

1 Like

Is now solved, I tested yesterday and couldn’t reproduce it anymore (see duplicate
iPhone X Splashscreen Error)

This question could also be marked as solved

Solution: update cordova-ios@4.5.4