Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Startup images not appearing on a home screen web app using iOS 9

I have a web application set as a home screen app targeted for Mobile Safari. I have a series of startup images defined and they work perfectly fine on multiple iPad and iPhone devices running iOS 8. When I setup the same application on devices running iOS 9, the images do not appear.

I've verified the images are on the server. I've deleted the app from my home screen on both the iOS 8 and iOS 9 devices, force-quit Safari, cleared the cache, then re-added the app to the home screen. This was done as a sanity check to make sure there wasn't a caching issue involved.

I've reviewed the common approaches that worked with iOS 8 to see if there's a variation that might still work, such as those found at:

  • http://taylor.fausak.me/2015/01/27/ios-8-web-apps/
  • Mulitple "apple-touch-startup-image" resolutions for iOS web app (esp. for iPad)?
  • Is there an equivalent apple-touch-startup-image for the IPAD?

All of this leads me back to the same issue. The startup images appear for me while running iOS 8, but they do not appear while running iOS 9.

Is anyone else seeing this problem? If startup images are appearing for you using a home screen app running iOS 9, what are the <link> tags that you're using?

Here is the configuration I have currently that works fine running iOS 8:

<!-- STARTUP IMAGES -->
<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="~/assets/images/startup/startup-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="~/assets/images/startup/startup-2048x1496.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 iPad (portrait) -->
<link href="~/assets/images/startup/startup-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iOS 6 iPad (landscape) -->
<link href="~/assets/images/startup/startup-1024x748.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="~/assets/images/startup/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="~/assets/images/startup/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="~/assets/images/startup/startup-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
like image 931
Mattio Avatar asked Sep 22 '15 16:09

Mattio


1 Answers

I am sorry to tell you this, but I do not think there is a soulotion for this on iOS 9. That feature have just stopped working. I have heard many others having the same problem.

like image 101
tjespe Avatar answered Oct 15 '22 13:10

tjespe