Distorted splash screen in Cordova (IOS)

Question

My problem is that the splash screen gets distorted in my landscape-only Cordova app (first image). After a couple of seconds the splash is displayed correctly (second image).

I have created all the splash screens in res/screen/ios and configured config.xml exactly as described on https://cordova.apache.org/docs/en/latest/config_ref/images.html.

I tried the Cordova splashscreen plugin ( https://github.com/apache/cordova-plugin-splashscreen ) but then I only get a black screen (the docs leave a lot for your imagination ("SplashScreen (string). The resource name which is used for the displaying splash screen. Different platforms use values for this." ??). So I probably did not manage to configure it properly.

My config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="se.mycompany.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Test</name>
    <description>
        Test
    </description>
    <author email="my@email.com" href="http://www.mywebsite.se">
        MyCompany
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <plugin name="cordova-plugin-splashscreen" spec="1" />
    <preference name="SplashScreen" value="Default~iphone.png" />
    <preference name="AutoHideSplashScreen" value="true" />
    <preference name="SplashScreenDelay" value="1" />
    <preference name="SplashMaintainAspectRatio" value="false" />
    <preference name="SplashShowOnlyFirstTime" value="true" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="Orientation" value="landscape" />
    <preference name="fullscreen" value="true" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
        <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
        <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
        <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
        <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
        <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
        <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
        <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
        <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
        <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/> 
    </platform>
</widget>

Answer 1

This seemed to be an issue with Cordova 3. After updating the issue resolved itself.