IOS Add to Homepage Icon Doesn't Display 100%

Mobile
1

Hey all… I’ve got a groovy little web app going on, and have used the “Add to Home screen” to remove the title bar and footer. Works great.

However, the actual home screen icon only displays about 3/4 of the icon, leaving the bottom 1/4 white. Any one know what the fix is for that?

Thanks Kindly.

2

I haven’t heard of it not working, so do you mind posting a zip of the .hype document exhibiting this along anything necessary to get the home screen icon on to show up? It’d also be useful to know what device and version of iOS you’re testing on.

3

Thank you…
image and zip included.

the 2x icons on the lower right are issue.IMG_1043

ENG.zip (175.7 KB)

4

Huh, that is really odd. I’ll need to investigate further; at this time I’m going to blame it on an iOS bug as home screen web apps are quite neglected!

You can probably workaround it by manually specifying a home screen icon. See this documentation for more details:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

The icon files themselves can be added to Hype’s Resources Library, and then you can reference them with the ${resourcesFolderName} magic variable like so:

<link rel="apple-touch-icon" href="${resourcesFolderName}/touch-icon-iphone.png">
2 Likes
5

Cool… that’s great Jonathan, thanks. I will give that a try…
Cheers.

6

Actually… I just changed the Scene background color to black and that at least fixed the white band on the bottom… the image itself is still only 3/4. Will take a look at your link.

1 Like