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

Jesper van den Ende
Reported 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.
Attachments
Screenshot of Narrow One installed to the home screen on iOS. (20.02 KB, image/jpeg)
2023-04-18 06:20 PDT, Jesper van den Ende 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Jesper van den Ende
Comment 1 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.
siim
Comment 2 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.
Jesper van den Ende
Comment 3 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.
Radar WebKit Bug Importer
Comment 4 2023-04-25 06:21:19 PDT
<rdar://problem/108501444>
Note You need to log in before you can comment on or make changes to this bug.