Bug 255596

Summary: Web app installed to home screen receives a black border in the icon
Product: WebKit Reporter: Jesper van den Ende <jespertheend>
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: jberlin, timothy, webkit-bug-importer, webkit
Priority: P2 Keywords: InRadar
Version: Safari 16   
Hardware: iPhone / iPad   
OS: iOS 16   
Attachments:
Description Flags
Screenshot of Narrow One installed to the home screen on iOS. none

Description Jesper van den Ende 2023-04-18 06:20:53 PDT 
Created attachment 465961 [details]
Screenshot of Narrow One installed to the home screen on iOS.

Steps to reproduce:

1. Go to https://narrow.one/
2. Add the page to the home screen.

Please see the attached screenshot. The black border is not supposed to be there. None of the images in the web app manifest contain a black border.

The manifest for narrow.one can be found at https://narrow.one/static/manifest.json
It has 6 icons:
- 2048x2048 webp
- 2048x2048 jpeg
- 1024x1024 png

and three more that are similar but maskable.

I think this regressed in iOS 16.4 because I'm pretty sure it was working a few months ago.
Comment 1 Jesper van den Ende 2023-04-18 06:36:20 PDT 
Hmm I'm guessing the black border is caused by the png being transparent.
I'm not sure why it picks the png only now, and not in previous versions.

I suppose this can be considered a feature request for maskable app icons.
It's a difficult situation. If I remove the transparency, the icon will not get rounded corners on some android devices, but if I keep it, it gets black borders on iOS.
Comment 2 siim 2023-04-20 02:26:20 PDT 
<link rel="apple-touch-icon" href="solid-color-icon.png">

Use this meta tag for iOS.


I think in previous iOS the border was white in light mode and black in dark mode. Now it looks like it is always black.
Comment 3 Jesper van den Ende 2023-04-20 08:33:30 PDT 
Thanks, the meta tag seems to work.

We already had a jpeg icon without transparency, I think previous versions used to pick up this icon instead of the pngs with transparency.

I think it would be best if iOS preferred 'maskable' icons when available, with the appropriate cropping, since the behaviour iOS is showing is exactly what the maskable purpose was made for.
Comment 4 Radar WebKit Bug Importer 2023-04-25 06:21:19 PDT 
<rdar://problem/108501444>