iPhone 6 splash screen resized after few second

Question

The splash screen appear normal (fit) at first and then after 2 seconds or so it resized / stretched onto right side off the screen

I'm developing iOS app using phonegap only (no xCode)

the iPhone 6 I use for testing is using iOS 9.2.1

here's config.xml :

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.polri.polisiku" version="1.0.0">
    <name>PolisiKu</name>
    <description>PolisiKu adalah aplikasi pencari pos polisi terdekat dari posisi user.</description>
    <author href="http://polri.go.id" email="mabes@polri.go.id">Divti Polri</author>
    <content src="index.html"/>

    <preference name="permissions" value="none"/>
    <preference name="orientation" value="portrait"/>
    <preference name="target-device" value="handset"/>
    <preference name="fullscreen" value="true"/>
    <preference name="webviewbounce" value="false"/>
    <preference name="prerendered-icon" value="true"/>
    <preference name="stay-in-webview" value="false"/>
    <preference name="StatusBarOverlaysWebView" value="true" />
    <preference name="StatusBarStyle" value="lightcontent" />
    <preference name="detect-data-types" value="true"/>
    <preference name="exit-on-suspend" value="false"/>
    <preference name="show-splash-screen-spinner" value="true"/>
    <preference name="auto-hide-splash-screen" value="true"/>
    <preference name="disable-cursor" value="false"/>
    <preference name="android-minSdkVersion" value="14"/>
    <preference name="android-installLocation" value="auto"/>

    <plugin name="cordova-plugin-whitelist" spec="1.2.1" />
    <plugin name="org.apache.cordova.battery-status" source="pgb" spec="0.2.12" />
    <plugin name="org.apache.cordova.camera" source="pgb" spec="0.3.6" />
    <plugin name="org.apache.cordova.console" source="pgb" spec="0.2.13" />
    <plugin name="org.apache.cordova.contacts" source="pgb" spec="0.2.16" />
    <plugin name="org.apache.cordova.device" source="pgb" spec="0.3.0" />
    <plugin name="org.apache.cordova.device-motion" source="pgb" spec="0.2.11" />
    <plugin name="org.apache.cordova.device-orientation" source="pgb" spec="0.3.11" />
    <plugin name="org.apache.cordova.dialogs" source="pgb" spec="0.3.0" />
    <plugin name="org.apache.cordova.file" source="pgb" spec="1.3.3" />
    <plugin name="org.apache.cordova.file-transfer" source="pgb" spec="0.5.0" />
    <plugin name="org.apache.cordova.geolocation" source="pgb" spec="0.3.12" />
    <plugin name="org.apache.cordova.globalization" source="pgb" spec="0.3.4" />
    <plugin name="org.apache.cordova.inappbrowser" source="pgb" spec="0.6.0" />
    <plugin name="org.apache.cordova.media" source="pgb" spec="0.2.16" />
    <plugin name="org.apache.cordova.media-capture" source="pgb" spec="0.3.6" />
    <plugin name="org.apache.cordova.network-information" source="pgb" spec="0.2.15" />
    <plugin name="org.apache.cordova.splashscreen" source="pgb" spec="1.0.0" />
    <plugin name="org.apache.cordova.statusbar" source="pgb" spec="0.1.4" />
    <plugin name="org.apache.cordova.vibration" source="pgb" spec="0.3.13" />

    <icon src="icon.png" />
    <splash src="splash.png" />

    <icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
    <icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
    <icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
    <icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>

    <splash src="res/screen/ios/screen-iphone-portrait.png" platform="ios" width="320" height="480" />
    <splash src="res/screen/ios/screen-iphone-landscape.png" platform="ios" width="480" height="320" />
    <splash src="res/screen/ios/screen-iphone-portrait-2x.png" platform="ios" width="640" height="960" />
    <splash src="res/screen/ios/screen-iphone-landscape-2x.png" platform="ios" width="960" height="640" />

    <!-- iPhone 5 / iPod Touch (5th Generation) -->
    <splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" platform="ios" width="640" height="1136" />
    <splash src="res/screen/ios/screen-iphone-landscape-568h-2x.png" platform="ios" width="1136" height="640" />

    <!-- iPhone 6 -->
    <splash src="res/screen/ios/Default-667h@2x~iphone.png" platform="ios" width="750" height="1334" />
    <splash src="res/screen/ios/Default-Landscape-667h@2x~iphone.png" platform="ios" width="1334" height="750" />
    <splash src="res/screen/ios/Default-736h@3x~iphone.png" platform="ios" width="1242" height="2208" />
    <splash src="res/screen/ios/Default-Landscape-736h@3x~iphone.png" platform="ios" width="2208" height="1242" />

    <!-- iPad -->
    <splash src="res/screen/ios/screen-ipad-portrait.png" platform="ios" width="768" height="1024" />
    <splash src="res/screen/ios/screen-ipad-landscape.png" platform="ios" width="1024" height="768" />

    <!-- Retina iPad -->
    <splash src="res/screen/ios/screen-ipad-portrait-2x.png" platform="ios" width="1536" height="2048" />
    <splash src="res/screen/ios/screen-ipad-landscape-2x.png" platform="ios" width="2048" height="1536" />

    <access origin="*"/>
    <plugin name="cordova-plugin-whitelist" version="1"/>
    <allow-intent href="http://*/*"/>
    <allow-intent href="https://*/*"/>
    <allow-intent href="tel:*"/>
    <allow-intent href="sms:*"/>
    <allow-intent href="mailto:*"/>
    <allow-intent href="geo:*"/>
    <platform name="android">
        <allow-intent href="market:*"/>
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*"/>
        <allow-intent href="itms-apps:*"/>
    </platform>
</widget>

the question is similar with PhoneGap and iPhone 6 Plus splash screen issue but i've tried all answer and nothing work, and they haven't marked an accepted answer.

thanks in advance and sorry for bad english

Answer 1

The splash screen is not resizing, it moves down because of the statusbar.

So, if you have enabled the statusbar the images have to be 20px shorter and for @2x 40px.

Answer 2

You are using the latest plugin on pgb (1.0.0), but that is too old ang pgb plugins are deprecated, you have to install latest version of the plugin from NPM (3.2.1)

Change

<plugin name="org.apache.cordova.splashscreen" source="pgb" spec="1.0.0" />

to

<plugin name="cordova-plugin-splashscreen"/>