After upgrading to iOS 14 a black screen is quickly shown before splash screen appears ios

[dtsc-engenharia]

Bug Report

Problem

It appears that the plugin is not working how it used to be on previous iOS versions. After upgrading to iOS 14, a black screen is shown very quickly before the real splash screen image is shown.

The easiest way to simulate the problem is using iOS simulator. A black screen will show up before splash and stay there for a few seconds. When I run on device, I can also see the black screen before splash but it happens very quickly.

What is expected to happen?

Splash screen is supposed to appear immediately after opening the app. A black screen is shown before the splash screen appears. Also the splash screen appears very quickly and disappears before the expected time compared to previous versions of the plug-in.

What does actually happen?

Black screen appears before splash screen

Information

I am using only the Default 2x universal image in my config.xml:

Additional splash screen configurations are:

Command or code

I am using cordova-plugin-splashscreen 6.1.1

Environment, Platform, Device

Version information

iOS 14 Cordova 10 Cordova android 9.0.0 Cordova ios 6.1.1

Checklist

• [ x] I searched for existing GitHub issues
• [ x] I updated all Cordova tooling to most recent version
• [x ] I included all the necessary information above

[goangus]

Not sure this is an issue specifically with cordova-plugin-splashscreen. I tried removing the plugin and added a new LaunchScreen storyboard with just an image and still had the same problem. Eventually managed to sort it by just removing the UILaunchStoryboardName entry from the {app name}-info.plist file.

[breautek]

Cordova iOS@6.0.1

Try updating to the latest cordova-ios version, which is 6.1.1 at the time of writing. It contains fixes regarding splashscreens that sounds similar to the described issue. (https://github.com/apache/cordova-ios/issues/890)

See Release Notes for more info.

[dtsc-engenharia]

Cordova iOS@6.0.1

Try updating to the latest cordova-ios version, which is 6.1.1 at the time of writing. It contains fixes regarding splashscreens that sounds similar to the described issue. (#890)

See Release Notes for more info.

Thanks for replying. I updated my original text. I am using cordova-ios 6.1.1 indeed and the problem persists.

[nice2seeu]

Thanks for replying. I updated my original text. I am using cordova-ios 6.1.1 indeed and the problem persists.

the same bug on me

[hburrows]

I'm experiencing the same issue. When launched from Xcode it hangs on a black screen for about 20 seconds with nothing in the console. Then it springs to life and populates console -- but no errors or anything notable. When launched from iOS proper (after force quick) the black screen flashes very briefly, then splash screen, then app. This is new since upgrading to Cordova 10.0.0 and iOS platform 6.1.1. I'm also running the latest version of Xcode (12.0.1)

[davidpadych]

Same for cordova-ios 5.1.1..can it be fixed without updating cordova ios?

[davidtoledo]

Same for cordova-ios 5.1.1..can it be fixed without updating cordova ios?

Depending on the root of the problem, it might work on cordova-ios 5.1.1. Even so, I recommend upgrading your project to the latest cordova-ios version as soon as possible.

[harivenkatesh-id]

Issue persists, able to see black screen every time for few seconds before splash screen appears.

[dpogue]

Hey folks, I'm looking to better understand this issue, since the initial launch screen is handled by iOS and the "splash screen" is just showing that launch screen for a longer duration.

Is the black screen happening right when you first launch the app, or does it show the launch screen for an instant and then show a black screen and then show the launch screen again?

If the black screen is showing before the launch screen comes up, that sounds like an iOS issue that we wouldn't any control over.

[harivenkatesh-id]

to better understand this issue, since the initial launch screen is handled by iOS and the "splash screen" is just showing that launch screen for a longer duration.

Thanks for replying, Yes every time i launch application first black screen appears for few seconds then splash screen is shown.

If this issue is not related to cordova-ios could you pls tell me where to raise this issue ??

[lempere]

Is the black screen happening right when you first launch the app, or does it show the launch screen for an instant and then show a black screen and then show the launch screen again?

With the next gif you can see what happens. The black screen appears before the splashscreen. (cordova@10, cordova-ios@5.1.1 used)

[harivenkatesh-id]

Is the black screen happening right when you first launch the app, or does it show the launch screen for an instant and then show a black screen and then show the launch screen again?

With the next gif you can see what happens. The black screen appears before the splashscreen. (cordova@10, cordova-ios@5.1.1 used)

Black screen happening right every time when i first launch the app

[goangus]

Eventually managed to sort it by just removing the UILaunchStoryboardName entry from the {app name}-info.plist file.

@harivenkatesh-id Did you try this? I think this is a change in how splashscreens are shown natively. The cordova splashscreen plugin emulates the native one, so this turns the native one off. It worked for me.

[lempere]

I try the @goangus fix, and it worked, thanks!! :-D

[harivenkatesh-id]

I try the @goangus fix, and it worked, thanks!! :-D

could you pls explain what you have done acutally in XCode ?

[goangus]

Yeah, if you click on the project navigator icon (top left) and open up the Resources folder, you should see a file called *-Info.plist. In there you will see an entry that refers to the Launch Storyboard Name. Just highlight that entry, and then click the little minus sign to remove it.

[goangus]

* being your projects name

[goangus]

Just as an FYI, that entry will be added back in every time you run cordova build ios so it's not an ideal solution. But it should help until the issue is resolved.

[harivenkatesh-id]

* being your projects name

Hi thanks for the quick replay. I'm using Xcode 12.0. In the *.Info.plist i couldnt see Launch Storyboard Name instead i could see Launch screen interface file base name. Is both are same. attached screen shot for your reference.

[goangus]

* being your projects name

Hi thanks for the quick replay. I'm using Xcode 12.0. In the *.Info.plist i couldnt see Launch Storyboard Name instead i could see Launch screen interface file base name. Is both are same. attached screen shot for your reference.

yeah that's it

[goangus]

If you right-click and click Raw Keys & Values you should see it's called UILaunchStoryboardName

[davidpadych]

did not help (cordova ios 5.1.1) ... the screen of the whole application has shrunk

[harivenkatesh-id]

If you right-click and click Raw Keys & Values you should see it's called UILaunchStoryboardName

This didn't help @goangus . whole app got shrunk and splash screen is not appearing able to see only white screen

[goangus]

Well, you should be able to get back to where you were by rebuilding with cordova. Mine is on cordova ios 6.1.1. Maybe try updating to that version and see if it helps?

[harivenkatesh-id]

i'm having cordova ios 6.1.1. still issue persists.

[goangus]

i'm sorry to hear that, I'm not sure what else to suggest. I have cordova ios 6.1.1 and cordova-plugin-splashscreen 5.0.4. Removing UILaunchStoryboardName worked for me. Maybe try removing and reinstalling the ios platform and the splashscreen plugin with cordova. Then rebuild the app and remove that plist entry again. Hopefully that will work for you.

[dpogue]

Does this still happen with cordova-plugin-splashscreen 6.0.0?

[davidtoledo]

i'm sorry to hear that, I'm not sure what else to suggest. I have cordova ios 6.1.1 and cordova-plugin-splashscreen 5.0.4. Removing UILaunchStoryboardName worked for me. Maybe try removing and reinstalling the ios platform and the splashscreen plugin with cordova. Then rebuild the app and remove that plist entry again. Hopefully that will work for you.

Hi @goangus Thanks for your reply. The problem persists to me even using corvoda ios 6.1.1. Removing the UILaunchStoryboardName entry won't work. Besides not working it also squeezes the app view port to the middle of the screen. Did you try it using a new device on simulator like "iPhone 11 Pro Max"? I believe if you try in an old device (small screen) it might give you the impression it is working correctly.

Please take a look on how the app is presented after removing the UILaunchStoryboardName entry from the info.plist file:

[davidtoledo]

Does this still happen with cordova-plugin-splashscreen 6.0.0?

Yes. The problem persists with cordova-plugin-splashscreen 6.0.0 and also cordova-plugin-splashscreen 6.0.1-dev version

[roman-rr]

@goangus works for me, many thanks!

[davidtoledo]

@goangus works for me, many thanks!

Hi @roman-rr Did you try this solution using iPhone 11 Pro Max in iOS Simulator? Please advise if it works ok or if the app screen is squeezed.

[roman-rr]

@davidtoledo Yes, in my case, removing config from plist completely fixed issue. Include real device.

[harivenkatesh-id]

i'm sorry to hear that, I'm not sure what else to suggest. I have cordova ios 6.1.1 and cordova-plugin-splashscreen 5.0.4. Removing UILaunchStoryboardName worked for me. Maybe try removing and reinstalling the ios platform and the splashscreen plugin with cordova. Then rebuild the app and remove that plist entry again. Hopefully that will work for you.

I tried removing ios6.1.1 platform and adding it again, similarly splash screen plugin as well. Its not working for me. Issue persists. Im running my project in iPhone11 simulator.

[goltra]

Eventually managed to sort it by just removing the UILaunchStoryboardName entry from the {app name}-info.plist file.

@harivenkatesh-id Did you try this? I think this is a change in how splashscreens are shown natively. The cordova splashscreen plugin emulates the native one, so this turns the native one off. It worked for me.

Works for me. Thanks a lot.

[goangus]

i'm sorry to hear that, I'm not sure what else to suggest. I have cordova ios 6.1.1 and cordova-plugin-splashscreen 5.0.4. Removing UILaunchStoryboardName worked for me. Maybe try removing and reinstalling the ios platform and the splashscreen plugin with cordova. Then rebuild the app and remove that plist entry again. Hopefully that will work for you.

Hi @goangus Thanks for your reply. The problem persists to me even using corvoda ios 6.1.1. Removing the UILaunchStoryboardName entry won't work. Besides not working it also squeezes the app view port to the middle of the screen. Did you try it using a new device on simulator like "iPhone 11 Pro Max"? I believe if you try in an old device (small screen) it might give you the impression it is working correctly.

Please take a look on how the app is presented after removing the UILaunchStoryboardName entry from the info.plist file:

@davidtoledo No problem. I tested on a couple of simulators, including iPhone X, but I mainly used physical devices. Works on iPhone 5, 8 plus. Also on iPad, and all tested on iOS 13 and 14. I'm guessing there must be configuration differences between our projects. There should be an an index.html file in the www folder in the root of your project. Can you check the meta viewport tag? should look something like <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

[harivenkatesh-id]

@goangus May i know your xcode version ? can you please try in iPhone11 simulator ?

[goangus]

@goangus May i know your xcode version ? can you please try in iPhone11 simulator ?

xcode 12, and yes works fine on iPhone 11 simulator. Just checked.

[michaelargast]

I can confirm what @davidtoledo is seeing, after removing UILaunchStoryboardName. It does cause the viewport to be displayed incorrectly. It appears to be scaled up. This happens after building in Xcode 12, running on iOS 14.0.1 on a iPhone 11.

However, the splash screen does properly show after having removed UILaunchStoryboardName. So it does seem to be related to that. I'm using cordova ios 5.1.1 and cordova-plugin-splashscreen 6.0.0.

[davidtoledo]

@davidtoledo No problem. I tested on a couple of simulators, including iPhone X, but I mainly used physical devices. Works on iPhone 5, 8 plus. Also on iPad, and all tested on iOS 13 and 14. I'm guessing there must be configuration differences between our projects. There should be an an index.html file in the www folder in the root of your project. Can you check the meta viewport tag? should look something like <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">

@goangus Thanks for your reply. I completely replaced my my meta viewport line for yours and the problem persists. I agree the problem might be related to configuration but in my opinion it is something in the cordova initialization module. I don't think any adjustments in the code would fix the problem.

Please confirm if you are using only the Default 2x universal anyany splash image, like me:

Maybe one of the plugins I am using is affecting the view port too. Here's a list of the plugins I am using:

@globules-io/cordova-plugin-ios-xhr 1.0.8 "Cordova WKWebView File XHR Plugin" cordova-plugin-device 2.0.4-dev "Device" cordova-plugin-inappbrowser 4.0.0 "InAppBrowser" cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard" cordova-plugin-ios-camera-permissions 1.2.0 "iOS Permissions" cordova-plugin-network-information 3.0.0-dev "Network Information" cordova-plugin-screen-orientation 3.0.2 "Screen Orientation" cordova-plugin-splashscreen 6.0.0 "Splashscreen" cordova-plugin-statusbar 2.4.3 "StatusBar" cordova-plugin-whitelist 1.3.3 "Whitelist" de.mayflower.cordova.android-scrollbar 0.2.1 "android-scrollbar" es6-promise-plugin 4.2.2 "Promise" mobi.moica.whatsapp 0.0.1 "Whatsapp" onesignal-cordova-plugin 2.10.1 "OneSignal Push Notifications" phonegap-plugin-mobile-accessibility 1.0.5-dev "Mobile Accessibility"

[michaelargast]

To get to the bottom of it, I created a new Cordova project, and found a configuration that is working.

I created the project with Cordova iOS 6.1.1 and the following plugins

cordova-plugin-splashscreen 6.0.0 cordova-plugin-ionic-webview 5.0.0 cordova-plugin-ionic-keyboard 2.2.0 cordova-plugin-statusbar 2.4.3 cordova-plugin-whitelist 1.3.4 cordova-plugin-device 2.0.3

<preference name="SplashMaintainAspectRatio" value="true" /> <preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="4000" />

I also kept UILaunchStoryboardName in my Info.plist.

Can some try and confirm if this is a workable solution?

[dpogue]

@michaelargast Is there any difference in behaviour if you do not have the splashscreen plugin installed?

[goangus]

@davidtoledo I am not using the default image. I used the Ionic resource generator to create the appropriate icons and splash screen images.

I'm not sure if any of your plugins would affect the viewport, I guess the best way to check is to remove them one by one and see if it makes a difference. I notice you have the ios-xhr plugin but I can't see any reference to any wkwebview replacement plugins. I'm using cordova-plugin-wkwebview-engine, as described here. As far as I know, you'll need to get rid of any UIWebView references before trying to submit to the App Store as they have deprecated it and are rejecting apps that use it.

[davidtoledo]

To get to the bottom of it, I created a new Cordova project, and found a configuration that is working.

I created the project with Cordova iOS 6.1.1 and the following plugins

cordova-plugin-splashscreen 6.0.0 cordova-plugin-ionic-webview 5.0.0 cordova-plugin-ionic-keyboard 2.2.0 cordova-plugin-statusbar 2.4.3 cordova-plugin-whitelist 1.3.4 cordova-plugin-device 2.0.3

<preference name="SplashMaintainAspectRatio" value="true" /> <preference name="FadeSplashScreenDuration" value="300" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="4000" />

I also kept UILaunchStoryboardName in my Info.plist.

Can some try and confirm if this is a workable solution?

I made the tests using exactly the configurations described above. In order to create a testable scenario, I added the following line to cordova.xml file:

<splash src="res/screen/ios/Default@2x~universal~anyany.jpg" />

The problem persists. I believe Apple added new configurations related to iOS splash screen in iOS 14 and cordova (or splash screen plugin) is not handling it according to these new rules.

[davidtoledo]

@davidtoledo I am not using the default image. I used the Ionic resource generator to create the appropriate icons and splash screen images.

@goangus Very interesting that you are using Ionic resource generator to generate the images. Probably that's the reason it is working for you when you remove the UILaunchStoryboardName entry from the {app name}-info.plist file and the same doesn't work for me.

[michaelargast]

@dpogue There is no change in behaviour after removing the splashscreen plugin. However, I did notice a very curios behaviour. Launching the app directly from Xcode is still giving me the black screen at startup for around 2 seconds. But if I only install the app from Xcode, and start it manually on the device, I do not observe the black screen issue. Maybe something @davidtoledo can try.

[davidtoledo]

@dpogue There is no change in behaviour after removing the splashscreen plugin. However, I did notice a very curios behaviour. Launching the app directly from Xcode is still giving me the black screen at startup for around 2 seconds. But if I only install the app from Xcode, and start it manually on the device, I do not observe the black screen issue. Maybe something @davidtoledo can try.

I tried that before. The same problem happens on device too. The difference is that running on the device it happens in milliseconds (super fast) and you barely can see the black screen before the splash. On simulator it takes a few seconds.

[davidpadych]

Can you please try the solution from this link: https://ashishkakkad.com/2020/06/how-to-set-launch-screen-in-ios-14/ ... ?

[davidtoledo]

Here's what I figured out by now:

iOS 14 now has the ability to use the entry UILaunchScreen instead of UILaunchStoryboardName

It seems to me that the black screen problem is caused when we ignore the UILaunchScreen entry.

If I add manually the entry UILaunchScreen in the Info.plist file and set UIImageName as LaunchStoryboard, the black screen problem is solved. We can no longer see the black screen before the splash screen. But the splash image is shown in a stretched way.

Anyway, I believe that's the reason for the problem. I believe that Cordova has to consider the new UILaunchScreen entry as a final solution for the problem in iOS 14+

[davidtoledo]

Can you please try the solution from this link: https://ashishkakkad.com/2020/06/how-to-set-launch-screen-in-ios-14/ ... ?

Thanks. The solution did not work but opened ways for a better understanding of the problem.

[roman-rr]

Note: removing UILaunchStoryboardName works only for cordova-ios: 5.1.1 in my case.