Chrome (Android): Webmanifest maskable icons ignore safe area when added to Android home screen via Chrome

[querkmachine]

Upstream bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1494844
Date: 2023-10-23
Reported by: @querkmachine
Related to: Found during, but not directly related to, alphagov/govuk-frontend#4178

---

Overview

The Web Application Manifest specification allows for the definition of various icons that browsers and other software can use in reference to your web application or webpage. Notably, this is the de facto means of defining home screen icons for Android devices when a webpage is saved to the home screen, even if the page is not a progressive web application.

Icons can be defined as being 'maskable', meaning that the icon has been designed to incorporate a safe area and that the user agent is free to crop the edges of the icon to better fit the user interface. Android is again, the most common use case for this, as various Android launchers manipulate icons in various ways (Google Pixel devices use circles, Samsung devices use squircles, OnePlus devices use rounded squares, etc.)

I encountered some unexpected behaviour when working to introduce a manifest and Android-compatible iconography into GOV.UK Frontend. Subsequently I created this page as a stripped-down, reproduceable testbed: https://querkmachine.github.io/favicon-test/

On this page, the 180x180, 192x192 and 512x512 icons are all defined as being maskable. The thin white circle on the image defines the edge of the safe area according to the Web Application Manifest specification.

Icons can be tested with various common masks using Maskable.app. The safe area can be tested in Google Chrome (for desktop) devtools, under Application → Manifest.

Expected result

All browsers on Android would respect the safe area. For the test page, this means that the white circle should be completely visible and uninterrupted within the icon, though it may touch the sides of the icon. (In most current implementations, the circle will not touch the sides at all.)

Browsers and devices do not need to all use the same resolution of icon, nor are they expected to crop them all in the same way, they only need to respect the safe area.

Actual result

Google Chrome consistently crops the icon too tightly, breaching the defined safe area. This happens fairly consistently across device manufacturers and Android versions running Chrome 117.

Other Android browsers with 'Save to home screen' functionality, like Edge and Firefox, do not have this issue. It appears to be specific to Chrome.

Below are some screenshots visualising the issue. Many more are included with the Chromium bug report.