Reputation: 203
I have 4 web apps that are webapp capable, each with a different URL on the same domain. When i set a homescreen icon for all 4 on an iOS 7 iPad, the icons start swapping out and get mixed up with eachother as i set them. To be more clear, here is the code for page 1.
<html>
<head>
<title>Test 1</title>
<meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="72x72" href="/images/iconPurple72.png" />
<!-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipadLandscape7.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="images/ipadPortrait7.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="/images/startup7.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)" />
<!-- enable full-screen mode -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- controls the appearance of the status bar in full-screen mode -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, user-scalable = yes"/>
</head>
<body>
<div><h1>this is test 1</h2></div>
</body>
</html>
..pages 2,3 and 4 are exactly the same, except for this line:
<link rel="apple-touch-icon" sizes="72x72" href="/images/iconPurple72.png" />
...each page points to a different image in the same directory
the behavior is inconsistent, but can be seen on the device as well as the simulator. When the ipad is restarted, the icons then appear normally, as they were originally set. Sometimes, before restart, tapping an icon that has changed after setting another page can cause the iPad to lock up.
Any ideas?
Upvotes: 2
Views: 752