iOS 9 Mobile WebApp Startup Screen Problem

Hi there,


I've recently made a website that is Mobile WebApp compatible, however for some reasons the startup screens don't display while the app is launching.

It worked in iOS 8. Have I done something wrong or is this a known bug?


Here is my code:

    <!-- META TAGS START -->
   
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!-- Chrome & Firefox OS -->
    <meta name="theme-color" content="#2196f3">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#2196f3">
   
   
    <!-- META TAGS END -->
   
    <!-- APPLE MOBILE WEB APP TAGS START -->
   
    <!-- CONFIGURATION -->
   
    <!-- Allow web app to be run in full-screen mode. -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
   
    <!-- Make the app title different than the page title. -->
    <meta name="apple-mobile-web-app-title" content="Cloud Craft">
   
    <!-- Configure the status bar. -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-transparent">
   
    <!-- Set the viewport. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   
    <!-- Enable automatic phone number detection. -->
    <meta name="format-detection" content="telephone=yes">
   
    <!-- ICONS -->
   
    <!-- iPad retina icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-152x152.png" sizes="152x152" rel="apple-touch-icon-precomposed">
   
    <!-- iPad retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-144x144.png" sizes="144x144" rel="apple-touch-icon-precomposed">
   
    <!-- iPad non-retina icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-76x76.png" sizes="76x76" rel="apple-touch-icon-precomposed">
   
    <!-- iPad non-retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-72x72.png" sizes="72x72" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone 6 Plus icon -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed">
   
    <!-- iPhone non-retina icon (iOS < 7) -->
    <link href="/assets/favicons/apple-touch-icon-precomposed-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed">
   
    <link rel="manifest" href="/assets/favicons/manifest.json">
    <link rel="shortcut icon" href="/assets/favicons/favicon.ico">
    <meta name="application-name" content="Cloud Craft">
    <meta name="msapplication-TileColor" content="#2196f3">
    <meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
    <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
    <meta name="theme-color" content="#2196f3">
   
    <!-- STARTUP IMAGES -->
   
    <!-- iPad retina portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 2)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPad retina landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 2)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPad non-retina portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 1)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPad non-retina landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
                     and (-webkit-device-pixel-ratio: 1)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 Plus portrait startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px)
                     and (-webkit-device-pixel-ratio: 3)
                     and (orientation: portrait)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 Plus landscape startup image -->
    <link href="/assets/startup/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px)
                     and (-webkit-device-pixel-ratio: 3)
                     and (orientation: landscape)" rel="apple-touch-startup-image">
   
    <!-- iPhone 6 startup image -->
    <link href="/assets/startup/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone 5 startup image -->
    <link href="/assets/startup/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone < 5 retina startup image -->
    <link href="/assets/startup/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
                     and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
   
    <!-- iPhone < 5 non-retina startup image -->
    <link href="/assets/startup/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
                     and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
   
   
    <!-- APPLE MOBILE WEB APP TAGS END -->

Replies

Same here. I went through the trouble of crafting 10 different custom images in photoshop and writing all the code to go with it only to find out it doesn't work in iOS9.


Apple, what happened? Did you consciously decide to remove that functionality, or is it a bug? Should I remove it from my codebase forever, or will it make its way back?


People still develop web apps you know. Not everyone has the team to go all native. Fastclick/Turbolinks/Bootstrap!


A response here would be awesome...

Same here, a response would be nice...

iOS 9.2 still not works.

But they have fixed the status bar!

+1 doesn't work for me either (ios9)

Can you please post the radar number?


Thanks very much.


--toco

Ever had a conversation with a brick wall?? LOL... Where am I... Microsoft? LOL... ****...

same problem here...

any new solutions? i really hope an update will follow soon!

Same issue, everything works except the startup image on iOS 9.2.1 with an iPhone 6s. Startup image is 750 x 1294. I hope this issue is being worked on despite the silence.


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/static/img/touch-icon.png">
  <link rel="apple-touch-startup-image" href="/static/img/startup.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
  <title>...</title>
  <meta name="apple-mobile-web-app-title" content="...">
  <link rel="stylesheet" href="/static/libs/bootswatch-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/libs/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/froala.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <base href="/">
</head>

I'd also love to know what's going on. I'll be watching.

Having the same issue as well. Using an iPhone 6+ with iOS 9.2.1 (13D15). Would love to know if there is a fix for this or if I can remove the code...

that means it's not possible anymore in io9?

is there a good alternative?

Up please ?!

Still doesn't work!

Same here. Hope to see this being fixed. Has anyone reported this bug within Apple Bug Reporter? Just did that #26974806.