iOS8 WebApp Splash Screen Black

Question

I'm looking into adding a splash screen for a WebApp in iOS8, however I just get a black rectangle instead of the splash image. An example I found online suffers from the same problem. (As seen here.) I've tried both on an iPad Air and an iPhone 5s. Is this a known bug, or am I doing something wrong?

<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-320x460.png"media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/l/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">

Answer 1

I was just working on a similar project: "building a WebApp" and went through the same headaches.

I have an iPhone 5S with iOS 8.1.1 and I just tested your third line with the 640px x 1096px picture successfully. I included once your whole code snippet and it worked aswell. I also went to your example page and it worked, too.

Unfortunately I don't have the link to the source, because I was just surfing the web but I can remember that one person had a problem with the line (your first line) for the iPhone 3. And as far as I can remember he had to put it at the end for no particular reason.

This is exactly the code I used for my test on line 3:

<link   rel="apple-touch-startup-image" 
        href="https://s3.amazonaws.com/mikemai/assets/img/ios/h/apple-touch-startup-image-640x1096.png"
        media="(device-width: 320px) and (device-height: 568px)
        and (-webkit-device-pixel-ratio: 2)"/>

I would suggest to test it only with this line first and adding the rest step by step. Hope it helps to know that it works here :)

One last thought: If you use a manifest file and you save the startup-image locally, you have to remove the WebApp and save to home screen again to reload the image or you have to update the manifest file aswell. Just in case the black rectangle got saved (not sure if it ever does).

In case you're interested, here is the meta for the title (keep it short):

<meta name="apple-mobile-web-app-title" content="Your WebApp Name" />