AngularJs IOS11 IPhoneX. Splash Screen Not Cover when load


#1

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

then it opens the apps like normal


#2

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>

#3

Duplicate iPhone X Splashscreen Error

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


#4

thanks for the direction


#5

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