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

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

[erikmay]

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.

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