mirror of
https://github.com/we-promise/sure.git
synced 2026-09-03 05:41:18 +00:00
Guillem Arias Fauste
914547ffdb
* fix(pwa): give the installed app icon a safe area The home-screen icon rendered edge to edge, with the wordmark's outer letters cut off by the platform's own mask. Measured against the shipped files, every icon had a 0.0% left/right margin — the artwork's bounding box was the full canvas, because the icons were rendered straight from the logo SVG whose viewBox (160x145) is exactly the wordmark with no padding. This is not iOS- or device-specific. iOS draws an apple-touch-icon full bleed into its squircle and reserves no safe area, so the corners always bite. Android is worse: the manifest declared the same full-bleed file as `purpose: "maskable"`, and a maskable icon is cropped to the launcher's shape, where only the centred circle of 80% diameter is guaranteed. Under a circular mask the "s" and "e" were sliced off. A second, unrelated-looking bug fell out of the same measurement: apple-touch-icon.png was a black wordmark on a *transparent* background. iOS composites transparency onto black, so on any device that picks the 180x180 over the 512x512 the icon renders as a solid black square with no logo at all. The 512 happened to be opaque, which is the only reason this wasn't already visible. Regenerated every masked icon from the vector source, flattened onto the manifest's own background_color (#F9F9F9) so none of them depend on transparency, and split the maskable icon into its own file with a bigger margin: any / apple-touch artwork at 72% of canvas, ~14% side margin maskable artwork at 59%, corners need a 79.6% circle (safe: 80%) Favicons are left alone deliberately: they are never masked, and padding a 16px glyph only makes it mush. * docs(pwa): correct two claims in the manifest icon note An icon may declare "any maskable" and serve both purposes when its artwork already sits inside the 80% safe circle; the rule is that a full-bleed image cannot be reused, not that sharing a file is forbidden. Ours is full-bleed at the `any` size, which is why maskable still gets its own file. iOS also does read this file — manifest `icons` since 15.4. The accurate statement is that the apple-touch-icon links take precedence for the Home Screen icon, which is why those are the ones that must stay opaque and self-padded.
