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

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.

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.

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

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

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

None of these workaround work in ios 15. I’m using Ionic 6, capacitor 3 and the black background still appears no matter what size or image I’m using.

One thing I noticed playing with Xcode. In file LaunchScreen.storyboard > View Controller Scene > View Controller > Splash If I change the Image to one of the system icon?, the black background disappear and the splash screen work just fine. It display the splash screen with chosen icon as background. Maybe some one can shed some light on how to fix this?

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

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

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.

Still no Capacitor fix here?

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.

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

Resizing the splashScreen Image to 2400x2400 (+ deleting the app and restarting the phone) solved the issue for me.

Reducing the image resolution no longer helps for iOS 15.

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.

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.

@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.

Thx. This works for me. Remember to del app, restart the phone and install it again, or try to install it on another phone to see if it works. Because apple will cache the splash, it is difficult to test whether it works or not.

For me the issue seems to be cordova-res. It only generates and copies these to Splash.imageset.

splash-2732x2732.png splash-2732x2732-1.png splash-2732x2732-2.png

It also needs to generate a splash-1334x1334.png and then add the additional references in the Content.json appropriately

{
  "idiom" : "iphone",
  "filename" : "splash-1334x1334.png",
  "scale" : "1x"
},
{
  "idiom" : "iphone",
  "filename" : "splash-1334x1334.png",
  "scale" : "2x"
},
{
  "idiom" : "iphone",
  "filename" : "splash-1334x1334.png",
  "scale" : "3x"
},

I guess I’d also argue that you don’t need 3 splash-2732x2732.png files. Just the one for all 3 scales would work?

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.

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

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. 👍

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 }