Re: [w3c/manifest] custom padding for maskable icons (#805)

Glenn internally shared a video which I'm waiting for permission to post here, since it's illustrative of the issue on Android.

I think it's fairly minor. The issue is specific to the fact that on Android, when you drag an icon, there is a "parallax" effect in which the icon is translated relative to its containing mask, allowing the black borders to be seen. This is only seen while dragging the icon (which is even more minor when you consider that your finger will typically be covering the entire icon during the drag).

We deliberately made the maskable icon in the manifest spec be a smaller portion of the icon than what is required on Android, because it seemed inappropriate to ask developers to supply a ridiculously large amount of padding in their icon, just to satisfy Android, when that padding would almost never be seen. This was the "Option A" in [my July 2018 post](https://github.com/w3c/manifest/issues/555#issuecomment-404097653). One important upside of Option B is that the maskable icon looks reasonable if simply displayed to the user with no modification in a square tile.

One thing to consider: is the Chrome WebAPK implementation placing the maskable icon in the _foreground_ or _background_ image that Android needs? It's supposed to be placed in the background, but perhaps it's being put in the foreground. My understanding was that the background image does not parallax when dragged on Android, only the foreground image is translated relative to the mask. So if placed in the background, you should never see the black area:

@mgiuca, [2018-07-11](https://github.com/w3c/manifest/issues/555#issuecomment-404097653):
> Now if we give this to Android, it will correctly chop down to 61% or 66%, giving the correct tight icon shown above. However, the extended border may be visible to the user in certain extreme cases. I've never seen Android show any part of the _background_ outside of the 72dp zone due to parallax, but who knows what a future version of Android might do. I think it's fairly safe to assume the user will never see these "black" pixels.

If Android actually is parallaxing the background image as well, or if the "wiggling" of the image as its dragged around is desirable, then the user agent can do more advanced padding without requiring spec intervention. My suggestions, from worst to best:

1. Fixed colour (e.g., black) padding
2. Average icon colour
3. The theme colour
4. Average or most common colour of the edge and corner pixels of the icon
5. Extrude the edges of the image out, as shown below

Average icon colour is unlikely to blend correctly with the edges, since if your icon is "white on a blue background" then the average colour will be a lighter blue than your background. Theme colour is somewhat likely to be correct, but may be completely wrong if the theme colour is your foreground colour. So option 4 is likely the best "low effort" solution.

Option 5 is likely to be the best all around, so I'll go into some (painstakingly manually done in GIMP) detail: start with a hypothetical maskable icon with non-uniform edge colour (based on [this](http://materialdesignblog.com/10-inspiring-examples-of-material-design-product-icons/)):

![image](https://user-images.githubusercontent.com/228433/66179278-a398b180-e6ab-11e9-8b10-93668428fbd6.png)

set every pixel of the 15% padding to the same colour as the nearest pixel in the source image (i.e., extrude the edges outwards in all four directions):

![image](https://user-images.githubusercontent.com/228433/66179541-bd86c400-e6ac-11e9-885e-9744d2e959db.png)

This looks weird when you look at the whole thing, but will almost certainly look "fine" if you only see a little bit of the edge while dragging. Almost all adaptive icons will feature a solid colour all the way around the edge, in which case Option 5 will be the same as Option 4 and look perfect. But for adaptive icons that have "stuff" at the edges, Option 5 will produce the best result.

> **1 (short term):** Specify in the spec exactly what the border colour should be, if one is needed.

I don't think this needs to be specified. It's a user-agent specific choice of how to present the icon, just like how we don't specify what mask to use, or what background colour to draw normal (transparent) icons on top of. We don't need to specify things that are outside of the developer's control, as long as we establish a contract between the developer and user agent, and the user agent makes a best effort attempt to fulfill that contract.

> **2 (longer term):** Explore ways that we can expose custom padding to the developer. ... Maybe it should be a separate manifest field independent of theme colour?

I don't really want to go down this path because we're effectively specifying a new field that's only useful on Android, and only useful in the edge case where the user is dragging the icon around and looking underneath their own finger to see it. I think the above options 4 and 5 should be sufficient to display the icon reasonably while parallaxing, that we shouldn't need to add more options for developers to get wrong in the manifest.

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/manifest/issues/805#issuecomment-538218942