search

apache / cordova-ios

Apache Cordova iOS
https://cordova.apache.org/
Apache License 2.0
2.16k stars 988 forks source link

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

Closed dtsc-engenharia closed 3 years ago

dtsc-engenharia commented 3 years ago

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
roman-rr commented 3 years ago

Finally i use this solution: 

npm rm cordova-ios
npm i cordova-ios@5.1.1

config.xml

<platform name="ios">
  <hook src="scripts/patchStoryboard.sh" type="after_prepare" />
  ...
</platform>

scripts/patchStoryboard.sh

#!/bin/bash

if [[ ! -f /usr/libexec/PlistBuddy ]]; then
exit 0
fi

PLIST=./platforms/ios/*/*-Info.plist
/usr/libexec/PlistBuddy -c 'Delete UILaunchStoryboardName' $PLIST
davidpadych commented 3 years ago

we may be missing the correct LaunchStoryboard sizes... then it would be enough to use UILaunchScreen and the value LaunchStoryboard

`

<splash src="res/screen/ios/Default@2x~universal~comany.png" />
<splash src="res/screen/ios/Default@2x~universal~comcom.png" />
<splash src="res/screen/ios/Default@3x~universal~anyany.png" />
<splash src="res/screen/ios/Default@3x~universal~anycom.png" />
<splash src="res/screen/ios/Default@3x~universal~comany.png" />

`

davidtoledo commented 3 years ago

we may be missing the correct LaunchStoryboard sizes... then it would be enough to use UILaunchScreen and the value LaunchStoryboard

<splash src="res/screen/ios/Default@2x~universal~anyany.png" /> <splash src="res/screen/ios/Default@2x~universal~comany.png" /> <splash src="res/screen/ios/Default@2x~universal~comcom.png" /> <splash src="res/screen/ios/Default@3x~universal~anyany.png" /> <splash src="res/screen/ios/Default@3x~universal~anycom.png" /> <splash src="res/screen/ios/Default@3x~universal~comany.png" />

Sounds like a good fix. Did you try it?

davidpadych commented 3 years ago

not yet... maybe tomorrow

davidpadych commented 3 years ago

Guys I have it ... :-) It already works ... all dimensions need to be prepared ... don't ask me why, but it is so!

<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />

and run:

ionic cordova build ios

Make sure cordova added it to Images.xcassets ... Do not change anything in info.plist ... leave Launch screen interface file base name: CDVLaunchScreen

davidpadych commented 3 years ago

Don't forget to invalidate the cache ... delete the application from your phone, turn off / on and clean the new install...

viz link Cordova README

davidtoledo commented 3 years ago

Guys I have it ... :-) It already works ... all dimensions need to be prepared ... don't ask me why, but it is so!

<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />

and run:

ionic cordova build ios

Make sure cordova added it to Images.xcassets ... Do not change anything in info.plist ... leave Launch screen interface file base name: CDVLaunchScreen

Hi @davidpadych That's awesome! I thought this solution might work but I didn't have time to try it. Thanks for sharing! Will try it as soon as I have some time!

The explanation is simple: iOS 14 is using a splash format other than the regular "Default@2x~universal~anyany.png". Maybe the default 3x (I don't know). Since we don't know which one is being used for a specific device, It seems to be a good idea to provide all of them, just like you did.

Will try this solution soon and will let you know about the results,

Thanks!

roman-rr commented 3 years ago

@davidtoledo Cordova resources doesn't generate following files automatically: 

<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />

What the best way to create this resources before build and avoid errors ?

davidtoledo commented 3 years ago

@davidtoledo Cordova resources doesn't generate following files automatically:

<splash src="resources/ios/splash/Default@2x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~universal~comcom.png" />
<splash src="resources/ios/splash/Default@3x~universal~anyany.png" />
<splash src="resources/ios/splash/Default@3x~universal~anycom.png" />
<splash src="resources/ios/splash/Default@3x~universal~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~iphone~comcom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anyany.png" />
<splash src="resources/ios/splash/Default@3x~iphone~anycom.png" />
<splash src="resources/ios/splash/Default@3x~iphone~comany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~anyany.png" />
<splash src="resources/ios/splash/Default@2x~ipad~comany.png" />

What the best way to create this resources before build and avoid errors ?

@roman-rr Yes. It doesn't. You have to generate your splash screen files according to the instructions stated at:

https://cordova.apache.org/docs/en/9.x/reference/cordova-plugin-splashscreen/#multi-image-launch-screen

Here are the list of files and image aspects you have to generate:

2x | universal | any | any | 2732x2732 | Default@2x~universal~anyany.png 2x | universal | com | any | 1278x2732 | Default@2x~universal~comany.png 2x | universal | com | com | 1334x750 | Default@2x~universal~comcom.png 3x | universal | any | any | 2208x2208 | Default@3x~universal~anyany.png 3x | universal | any | com | 2208x1242 | Default@3x~universal~anycom.png 3x | universal | com | any | 1242x2208 | Default@3x~universal~comany.png

You can generate these images manually using any image editor you like,

Make sure all the important content (texts, logos, relevant figures) are inside the safe area into these images and generate the files according to the file names and image aspects listed above.

...and please let us know if the problem is solved after you make these changes.

davidpadych commented 3 years ago

I prepared them manually in GIMP... I would add it as a requirement rather to the cordova-res plugin ..

Cordova documentation:

scale idiom width height size filename
2x* universal any any 2732x2732 Default@2x~universal~anyany.png
2x universal com any 1278x2732 Default@2x~universal~comany.png
2x universal com com 1334x750 Default@2x~universal~comcom.png
3x* universal any any 2208x2208 Default@3x~universal~anyany.png
3x universal any com 2208x1242 Default@3x~universal~anycom.png
3x universal com any 1242x2208 Default@3x~universal~comany.png
scale idiom width height size filename
2x* iphone any any 1334x1334 Default@2x~iphone~anyany.png
2x iphone com any 750x1334 Default@2x~iphone~comany.png
2x iphone com com 1334x750 Default@2x~iphone~comcom.png
3x* iphone any any 2208x2208 Default@3x~iphone~anyany.png
3x iphone any com 2208x1242 Default@3x~iphone~anycom.png
3x iphone com any 1242x2208 Default@3x~iphone~comany.png
2x* ipad any any 2732x2732 Default@2x~ipad~anyany.png
2x ipad com any 1278x2732 Default@2x~ipad~comany.png
EtienneLem commented 3 years ago

I confirm that only adding the Default@2x~iphone~anyany.png finally solved the issue for us. I did have to delete + reboot iPhone in order to see a difference (also did Clean Build Folder (Cmd + Shift + K in Xcode) just in case). Not sure if relevant, but we also have a dark version of the launch screen.

At the end we only have these assets:

<splash width="2732" height="2732" src="www/res/splash/Default@2x~universal~anyany.png" />
<splash width="2732" height="2732" src="www/res/splash/Default@2x~universal~anyany~dark.png" />
<splash width="1334" height="1334" src="www/res/splash/Default@2x~iphone~anyany.png" />
<splash width="1334" height="1334" src="www/res/splash/Default@2x~iphone~anyany~dark.png" />
michaelargast commented 3 years ago

I can also confirm, replacing the screens and adding additional sizes has fixed the issue on my end. Works both in Cordova 5.1.1 and Cordova 6.1.1.

davidtoledo commented 3 years ago

That's it!

The solution is finally confirmed!

As we can see, something changed in the way splash screens are handled in iOS 14:

The entry <splash src="res/screen/ios/Default@2x~universal~anyany.jpg" /> is no longer being used for iPhones.

Now we have to add this entry: <splash src="res/screen/ios/Default@2x~iphone~anyany.jpg" /> in order to get iPhone devices covered too.

For people using only the universal~anyany entry (the only entry necessary in previous iOS versions): you just have to add the iphone~anyany entry to your config.xml file and you are good to go.

See example below:

<splash src="<path to your image>/Default@2x~universal~anyany.jpg" /> <splash src="<path to your image>/Default@2x~iphone~anyany.jpg" />

Obviously you also have to create another image file called Default@2x~iphone~anyany.jpg (or png) with the resolution 1334 x 1334 pixels and put it inside your splash screen images directory.

Another thing that I noticed is that the splash screen fading effect is no longer working if the FadeSplashScreenDuration entry is not stated in the config.xml file.

So, you just have to add this line to your config.xml file and you will get the same default fading effect as in the previous iOS versions:

<preference name="FadeSplashScreenDuration" value="500"/>

Thank you very much for all collaborators in this thread.

I believe the final solution is finally found!

harivenkatesh-id commented 3 years ago

It works like charm!! Thanks @davidpadych @davidtoledo

philippogol commented 3 years ago

solvedx3!

cordova 10.0.0 ios: 6.1.0

maybe this helps some one, I spent some hours updating our app, solving this new splash black screen issue, here the step-by-step: (i recommend building a new app just to make it work; zip/backup the original one)

  1. cordova create [NAMEAPP] [BUNDLEID] [NAMEAPP]
  2. on folder-root (not inside platform, is also not created) create this folder structure: res > screen > ios
  3. create this 3 following splashes and add them inside res > screen > ios (before building platform)
  4. name: Default@2x~iphone~anyany.png (size: 1334 × 1334)
  5. name: Default@3x~iphone~anyany.png (size: 2208 ×2208)
  6. name: Default@2x~ipad~anyany.png (size: 2732 × 2732)
  7. edit config.xml (on folder-root), add following lines: <platform name="ios"> <splash src="res/screen/ios/Default@2x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@3x~iphone~anyany.png" /> <splash src="res/screen/ios/Default@2x~ipad~anyany.png" /> </platform>
  8. cordova platform add ios

some tips:

  1. test it first on the simulator and play within until it works (if it does not work delete the app from the simulator and restart)
  2. when testing on device delete the previous app and restart the phone, otherwise will not work
  3. do not touch in xcode the folder Images.xcassets > LaunchStoryboard
  4. this official guide (ios section) helped me out: https://github.com/apache/cordova-plugin-splashscreen#installation

additional thoughts: since everybody is using a splash image, cordova could provide dummy data for future versions and avoid issues

brodycj commented 3 years ago

Should this be solved in the Hello World template for new apps?

Should this be documented - https://github.com/apache/cordova-docs/issues/1144?

philippogol commented 3 years ago

I would say yes, at least for this builds specs.

On Wed, Dec 30, 2020 at 1:23 AM Chris Brody notifications@github.com wrote:

Should this be solved in the Hello World template for new apps?

Should this be documented - apache/cordova-docs#1144 https://github.com/apache/cordova-docs/issues/1144?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/apache/cordova-ios/issues/990#issuecomment-752284608, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABIFMRR7L3HGONBTNZJJ27LSXJXHXANCNFSM4RSZ5PJQ .

erisu commented 3 years ago

@philippogol One of the things your mentioning as tips to remove the app and reinstall when the splash screen is not reflected is a known quirk with iOS and had already been mentioned in docs.

https://cordova.apache.org/docs/en/9.x/reference/cordova-plugin-splashscreen/index.html#quirks-and-known-issues

Also, IMO I think it is not necessary to add anything to the hello world app. User should add their own splash screen. Additionally if we add, then we have to add for all various platforms, and then the users must replace all or delete...

Birowsky commented 3 years ago

I'd say this is not a fix, but a workaround. I'd still like to have a feature where I provide a single image, and then the Cordova build process takes care of the sizes.

breautek commented 3 years ago

I'd say this is not a fix, but a workaround. I'd still like to have a feature where I provide a single image, and then the Cordova build process takes care of the sizes.

Cordova supports this on iOS. See https://github.com/apache/cordova-plugin-splashscreen#single-image-launch-screen

Note this only works well if your splashscreen is relatively simple.

Birowsky commented 3 years ago

Cordova supports this on iOS.

Of course, but not without the problem described in this issue. That's how I ended up here : )

FPCSJames commented 3 years ago

It would sure be nice if this could be fixed - cordova-ios should be able to transform a universal-anyany image for iOS 14 devices just like it always did. Why was this ever closed when the bug still exists? There's no fix here or in the splashscreen plugin, @breautek.

@philippogol The set of three images seems to at least improve the behavior. Cheers.

jcesarmobile commented 2 years ago

Cordova has never transformed nor done any image manipulation, the thing is iOS "allowed" to have a single image that was displayed for all the devices, but on iOS 14, if the image is too big as recommended by the "single image" tip, it doesn't display on iPhone devices anymore. So it's not a cordova bug and cordova won't be doing anything to fix that, in any case document that it doesn't work for iOS 14 anymore on iPhone devices.