PWA splash screen fades to black?

Question

On iPhone iOS 11.4, when tapping a PWA icon from the home screen, it shows a splash screen, goes to black, then goes back to the splash screen. Not sure why it goes to black, but it can be seen in the PWA example here:

Online demo: https://pwa-splash.now.sh

Github repo: https://github.com/applification/pwa-splash-screens

Source code of demo: https://github.com/applification/pwa-splash-screens/blob/master/index.html

Simply open the online demo link on your phone, add it to your home screen, and click the PWA app icon from your home screen to see the issue with the splash screen.

Any idea how to eliminate the black (so it’s just the splash screen)?

Answer 1

I've tested in iOS 11.4 (iPhone x resolution) and all I saw was the default white splash screen and not the image which is linked via "apple-touch-startup-image".

In the code, I did not see any resolution supporting iPhone X's(2436-by-1125) which answered the behavior.

Please refer this answer to support more higher resolution to make it work in your resolution and all possible iOS devices.