bug: iOS 14 Black screen always on initial app launch prior to actually showing the splash screen [SplashScreen]

[Exocomp]

This bug is for the SplashScreen plugin described here.

Create an ionic app with capacitor, deploy it on the simulator or physical device:

1) Launch the application 2) Get black screen <-- this was not here prior to iOS 14 3) Transition to the actual splash image

Here is an example of a project where you can reproduce it: https://github.com/Exocomp/demo-ionic-swippable-modal.git

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : 0.15.1
   native-run  : 1.1.0

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Catalina

[AE1NS]

Same here. Does someone have a workaround/quickfix for this?

[Deepfreezed]

Launch screen with image stopped working with iOS 14, Xcode 12. Only workaround currently is to not use an image.

[media4learning]

Same issue here, ios 14 fresh cap app launch screen on ios is black. If anyone finds a solution please post

[bolivir]

I see the same issue happening, launch app --> black screen --> Splash

[francodelsancio]

I see the same issue happening, workaround for now, not use background image, replace it with a view and make the launch screen in there by hand.

[chrisdelambert]

I have noticed a lot of apps displaying a black screen briefly before the launch screen on ios 14. I changed my SplashScreen plugin config to the below and the launch screen now displays: (delete the delay param)

"SplashScreen": { "launchAutoHide": false }

[Exocomp]

I see the same issue happening, workaround for now, not use background image, replace it with a view and make the launch screen in there by hand.

@francodelsancio can you please provide some steps on how to do this.

@chrisdelambert "launchAutoHide": false doesn't work still has the black screen.

[francodelsancio]

@francodelsancio can you please provide some steps on how to do this. Sure, i remove the ImageView in LaunchScreen.storyboard and set a view instead, then i set the background color to the view, and added the logo with auto layout. I noticed that the images appear in the SDK but not in the device unless they are added in Bundle Resources (Build Phases).

[Exocomp]

@francodelsancio thanks for the steps, I tried it and it's not solving the issue. Correct me if I'm wrong but your steps just set the initial logo it doesn't affect the splash screen.

So this is what I see after your steps:

1) Launch app 2) See logo 3) Transition from logo to black screen 4) Transition from black screen to splash screen

So unfortunately it is still not working.

[bolivir]

I have noticed a lot of apps displaying a black screen briefly before the launch screen on ios 14. I changed my SplashScreen plugin config to the below and the launch screen now displays: (delete the delay param)

"SplashScreen": { "launchAutoHide": false }

Above was the solution for me, i removed the other entries i had in there like launchShowDuration. Now my config only contains the launchAutohide key. I just rebuilded the app and now i see no black screen appearing.

[francodelsancio]

@Exocomp i am sorry to hear that this not solve your problem, it seems, in my case, that the back screen is the background color coming from the imageView, because at run time its not loading from the resources, thats why i modify the launchscreen.storyboard, remove the imageView, added a view, set the background color, and put the logo. In configuration I also set it to start with that storyboard. Regards

[Exocomp]

@francodelsancio it makes sense what you're saying but as soon as I add an image it goes to black, can you please include your LaunchScreen.storyboard file that will really help.

[francodelsancio]

@Exocomp i attach above an image of the tree in the splashscreen.storyboard if you change the background color of the elements you will notice that it is not loading the images. to load them you must attach them in the resource bundle. The assets folder are in the resource bundle, why are not loaded I don’t know. But the workaround works. All this assuming that we have the same problem. Regards

[ghost]

Are there any updates on this problem here? Facing the same issues with the example app and its a pain point for me to see every time this black screen. Appreciate every help/workaround; the ones mentioned above didn't work for me.

Best regards

[ghost]

Same problem here, black screen of the dead... it's totally anoying for user experience. I'v not found workaround... any solution here ? an update ?

[Faisal49m]

Same issue here, tried all workarounds explained above didn't work, I was able to fix it in Cordova by removing the UILaunchStoryboardName from the .plist file but it didn't work here

[eddyD45]

I've tried all the proposed workarounds posted above and still have the same issue, usually with the black screen lasting for about 30 seconds to a minute before fully launching the app. It only happens on the first launch after installation; opening the app again a second time does not yield the black screen anymore. Are there any updates on this issue?

[kinggolf]

TLDR: What worked for me was to reduce file size of launch images.

I have 3 current Ionic/Capacitor/Angular apps. Two of them exhibit the same problem described here, initial black screen on app start prior to displaying actual launch image. The third never showed this problem and always started up fine.

After digging through all set-ups, configs, dependencies, ..., I found nothing to help my 2 problem apps. Just this morning I noticed the file size differences of the launch images: good app: 29KB problem apps: 145KB and 104KB

First I just pulled the launch images from the good app to one of problem apps and launch screen at start up was perfect, i.e. no black screen. Then I ran the launch images from 2 problem apps through squoosh - 145KB images reduced to 37KB and 104KB images reduced to 45KB. Put these new launch screen images into respective iOS apps and built onto my iPhone. Both app now start up perfectly with no black screen image.

Interesting note - both problematic apps are older and previously released to AppStore and have always worked fine. Something with iOS 14 definitely created this issue. Issue is not related to Xcode 12.

Possibly cordova resources would help this if used, but I have not tried.

I learned about squoosh from React Native Radio Podcast one of the most informative dev podcasts I've come across - even though I do no React Native development.

[nachshonfertel]

I have 3 current Ionic/Capacitor/Angular apps. Two of them exhibit the same problem described here, initial black screen on app start prior to displaying actual launch image. The third never showed this problem and always started up fine.

Tried this and it does not work for me.

[kinggolf]

Additional set up info in my apps, in case it helps, I am not using any splash screen plugin (Capacitor or Cordova). And no splash screen settings in capacitor.config.json. Just seems to work better for me.

[eddyD45]

TLDR: What worked for me was to reduce file size of launch images.

I have 3 current Ionic/Capacitor/Angular apps. Two of them exhibit the same problem described here, initial black screen on app start prior to displaying actual launch image. The third never showed this problem and always started up fine.

After digging through all set-ups, configs, dependencies, ..., I found nothing to help my 2 problem apps. Just this morning I noticed the file size differences of the launch images: good app: 29KB problem apps: 145KB and 104KB

First I just pulled the launch images from the good app to one of problem apps and launch screen at start up was perfect, i.e. no black screen. Then I ran the launch images from 2 problem apps through squoosh - 145KB images reduced to 37KB and 104KB images reduced to 45KB. Put these new launch screen images into respective iOS apps and built onto my iPhone. Both app now start up perfectly with no black screen image.

Interesting note - both problematic apps are older and previously released to AppStore and have always worked fine. Something with iOS 14 definitely created this issue. Issue is not related to Xcode 12.

Possibly cordova resources would help this if used, but I have not tried.

I learned about squoosh from React Native Radio Podcast one of the most informative dev podcasts I've come across - even though I do no React Native development.

Strangely enough, this somewhat fixed the issue for me. After reducing the splash image size, my app will load the splash image immediately. However, this only seems to be masking the underlying issue, as I still have a 1~2 minute hang-time before my app properly loads and hides the splash image. Either way, this fixes the original issue at hand, so thank you.

[arcbus]

I'll just throw my hat in the ring and also mention that i'm seeing this.

Had an older cordova project where indeed removing the UILaunchStoryboardName from plist worked, but haven't been able to solve it in capacitor :(

[aparajita]

Hang in there, next week I'll be releasing a new splash screen plugin that will fix all of these problems.

[Exocomp]

It turned out to be an image resolution for me, it was 2700x2700 initially, I dropped it down to 2300x2300 and I don't get the black screen anymore. If you try this just make sure to backup your original image so once this issue is fixed you can start using the higher resolution again. Note that the size on the disk stayed pretty much the same so not a size on disk issue. Thumbs up if this works for you too. 👍

[yacut]

@aparajita Any progress on this? We really waiting for this fix... 😞

[aparajita]

@yacut Hopefully this week. I'm actually working on 3 killer plugins: splash screen, biometric auth, and console. It will be worth the wait. 😁

[angelolencina]

@aparajita hi my friend! any progress on this?

[aparajita]

@angelolencina 3 killer plugins became 4 😁, and I had a lot of work to do for my job, so it was a busy week. It looks good for releasing the splash screen plugin this week.

[angelolencina]

@angelolencina 3 killer plugins became 4 😁, and I had a lot of work to do for my job, so it was a busy week. It looks good for releasing the splash screen plugin this week.

Ok. Thank you!! 😁👍

[AE1NS]

Hey @aparajita, do you have any news about the splash screen plugin?

At the moment our iOS App has a black screen and the Android App has a colored background (instead of a stretched image) before the ionic splash is displayed. Unfortunately there seems to be no proper solution until you rescue us 👍 Thank you for your effort, this sounds really great!

[aparajita]

This week for sure. Just releasing a secure storage plugin today, splash screen will be next.

[bradmartin]

@aparajita - I'm coming here from searching on solutions for other frameworks. This issue is with iOS 14. I've been trying to implement the UILaunchScreen key in the plist of project by setting the UIImageName to an imageasset declared in the assets. However, the sizing is very difficult to determine for all the iPhone screens.

Curious how you're approaching this. As this key is also something only for iOS 14, and if you support previous iOS versions the storyboard is supposed to be working. I have a worry this is something we're going to be waiting on an iOS patch release for this to stabilize.

Would appreciate any insight you have regarding this, as I'm digging deep into native projects and still can't find a solid solution. See: https://stackoverflow.com/questions/63978396/launch-screen-not-working-on-ios-14-with-xcode-12 for more context on the impact hitting developers not just using Capacitor or Ionic as it's iOS 14 that seems to have the issue respecting the previous storyboard configuration. Cheers :)

[aparajita]

@bradmartin I will be releasing my Super Splash Screen plugin tomorrow that does everything you want. So you may not want to spend too much more time on it.

[bradmartin]

I don't think any plugin in any framework is going to fix the issue as this seems to be something in iOS 14 causing it.

Storyboards for the launch screen work according to this table below:

iPad Air (4th generation) - SUCCESS
iPad Pro (9.7 inch) - SUCCESS
iPad Pro (11 inch  2nd generation) - SUCCESS
iPad Pro (12.9 inch 4th generation) - SUCCESS

iPhone 8 - SUCCESS
iPhone 8 Plus - FAILURE
iPhone 11 - SUCCESS
iPhone 11 Pro - FAILURE
iPhone 11 Pro Max - FAILURE
iPhone 12 - FAILURE
iPhone 12 Pro - FAILURE
iPhone 12 Pro Max - FAILURE
iPhone 12 mini - FAILURE

iPhone SE (2nd generation) - SUCCESS
iPod Touch (7th generation) - SUCCESS

So it seems that the storyboard for launch screen is failing on "special" devices like the plus, pro max, etc.

According to apple, storyboards should work on iOS 14, since if you want to support anything prior to 14 you cannot use the new UILaunchScreen as part of the plist file to specify a UIImage to render.

[franciscomontiel]

I am having the same problem and still decided to push to testflight/appstore , the problem with the black screen that happened in our development cellphones did not happened when downloading from store. Hope it helps.

[aparajita]

@bradmartin Storyboards are working for me on iOS 14 on those devices, at least in the simulator.

[bolivir]

@aparajita is the update live? Or when do you expect it to go live?

[bradmartin]

@aparajita - I've actually had a colleague have his storyboards working as well. It has to be a combination of iOS, devices and possibly xcode 12. Too many reports of the black launch screen on iOS with storyboards for it to not be an "issue" somewhere. I'm glad some people aren't encountering it, but it's a bummer because a lot of people are still facing it across various frameworks and apps.

See this SO post to get an idea of how spread the issue is and the various approaches devs have taken to resolve, but with no one having concrete information on a solution. Again, that's great you're not facing the issue, but sadly, it's an issue somewhere and I've not found any solid information to address it anywhere. Since the documentation states that it should work just fine :)

[aparajita]

@bradmartin That's an iOS bug that has nothing to do with Capacitor, so technically the discussion doesn't belong here.

@bolivir Hopefully going live today, have to write documentation.

[bradmartin]

May not belong here, but this issue is becoming prevalent via search engines due to the number of devs encountering it, more info the better for developers in my opinion.

However, I'm inquiring your fellow expertise because I wonder if you're going to run into the same issues with your plugin in Capacitor, at any rate best of luck but looks like there is no solid solution even if you have a working plugin since this is an iOS issue impacting native iOS apps and other frameworks that build native apps. Cheers.

[calvinwoo]

What ended up solving the problem for me was following the instructions in this comment: https://github.com/apache/cordova-ios/issues/990#issuecomment-705086806

I removed UILaunchStoryboardName from Info.plist. Then, I added a dictionary called UILaunchScreen and within that, a key UIImageName set to the value LaunchScreen.

[mugenyi]

  <key>UILaunchScreen</key>
  <dict>
    <key>UIImageName</key>
    <string>LaunchScreen</string>
  </dict>

As suggested by calvinwoo. Add that code to Info.plist

[magnusmay]

After having dealt with the problem extensively, I am now happy to probably be able to provide all of you with a solution to the problem.

1. Search for and remove this following part from the Info.plist:

`UILaunchStoryboardName

LaunchScreen` **2.** Instead add this part into the `Info.plist`: `UILaunchScreen UIColorName Splashscreen-Color UIImageRespectsSafeAreaInsets ` **3.** Now we can change the black screen at the start of the app to any color we want / need. This is much better user experience wise. Add your colors in the `Assets.xcassets`: As you can see I called my colors in the `Assets.xcassets`: `"Splashscreen-Color"` This name is also mentioned in our `Info.plist`. Right here -> `Splashscreen-Color` If you want to change the name, change it in the `Assets.xcassets` and also the `Info.plist`. This should be all steps necessary to remove the annoying black splash screen before our own splash screen. **4.** Additionally you can also fully disable our own splash screen made by Capacitorjs and only use this color as a splash screen. To do that just add this to your `capacitor.config.json`: `"SplashScreen": { "launchShowDuration": 0 }` And you can also add your own image to the `Info.plist`-splash screen. Just add your image file with _a lot of transparency_ around the actual logo to the `Assets.xcassets`: And then just add the following to your `Info.plist`: `UILaunchScreen UIColorName Splashscreen-Color UIImageName Splashscreen-Image UIImageRespectsSafeAreaInsets ` ### I hope this solves the problem for everyone! Please tell me if it worked for you.

[Syahrul]

@erikmay in ios 14.6, it always show a white screen instead of the color that you set (actual device). How can I fix this? Thank you

[rgbaman]

After having dealt with the problem extensively, I am now happy to probably be able to provide all of you with a solution to the problem.

1. Search for and remove this following part from the Info.plist:

<key>UILaunchStoryboardName</key> <string>LaunchScreen</string>

2. Instead add this part into the Info.plist:

<key>UILaunchScreen</key> <dict> <key>UIColorName</key> <string>Splashscreen-Color</string> <key>UIImageRespectsSafeAreaInsets</key> <true/> </dict>

3. Now we can change the black screen at the start of the app to any color we want / need. This is much better user experience wise. Add your colors in the Assets.xcassets:

As you can see I called my colors in the Assets.xcassets: "Splashscreen-Color" This name is also mentioned in our Info.plist. Right here -> <string>Splashscreen-Color</string> If you want to change the name, change it in the Assets.xcassets and also the Info.plist.

This should be all steps necessary to remove the annoying black splash screen before our own splash screen.

4. Additionally you can also fully disable our own splash screen made by Capacitorjs and only use this color as a splash screen. To do that just add this to your capacitor.config.json:

"SplashScreen": { "launchShowDuration": 0 }

And you can also add your own image to the Info.plist-splash screen. Just add your image file with a lot of transparency around the actual logo to the Assets.xcassets:

And then just add the following to your Info.plist:

<key>UILaunchScreen</key> <dict> <key>UIColorName</key> <string>Splashscreen-Color</string> <key>UIImageName</key> <string>Splashscreen-Image</string> <key>UIImageRespectsSafeAreaInsets</key> <true/> </dict>

I hope this solves the problem for everyone! Please tell me if it worked for you.

This no longer works for iOS 14.6 and it displays a white screen before navigating to the first page.

[haroonakram]

Does anyone find any fix for this problem... Facing the same problem and Apple rejected the build due to this

@erikmay tried your solution but not working

[eliassparagis]

I had the same issue until I replaced the splash png files with smaller ones. After that black screen gone and the capacitor livereload works as expected. Working on mac M1 Big Sur 11.4

[hbjpn]

In my case, the splash image was not shown, just see white blank image. ( iOS 14.6 and Xcode 12.5 with ionic 5 and capacitor 3.0)

Reducing the image size(in pixel) of the 3 files in the following folder works for me. Assets.xcassets/Splash.imageset splash-2732x2732.png splash-2732x2732-1.png splash-2732x2732-2.png

I resized the images from 2732x2732 (image size generated by cordova-res) to 2048x2048. Maybe reducing the image size less than 2732 pixel will result in slightly blurred splash image in e.g. iPad Pro 12 inch, but anyway splash screen works.

Note that the image "file" size seems to be not a matter as I confirmed 2732x2732 with 140KB does not work but 2048x2048 with 200KB images works.

This seems to be a problem in iOS 14, Apple should fix this issue. 2732 pixel splash screen is definitely needed to cater for the latest devices.

[dkiselew]

I solved this problem by adding in XCode "iPhone" images to Splash.imageset with corresponding sizes (see Apple docs), looks like iOS 14 doesn't apply Universal image correctly:

More about this: https://github.com/apache/cordova-ios/issues/990

[franciscogar94]

I solved this problem by adding in XCode "iPhone" images to Splash.imageset with corresponding sizes (see Apple docs), looks like iOS 14 doesn't apply Universal image correctly:

More about this: apache/cordova-ios#990

@dkiselew Hi. What was the dimensions that u use for the Iphone Splash part?