Repository navigation
fix(pwa): rebuild app icons on one background so macOS shows no inner tile - #38
Merged
Merged
Conversation
… tile Chrome desktop installs on two newer machines showed the Familiar icon as a tile inside a tile with white corners; an older install looked right. No icon had changed since the July public snapshot, so this was a latent defect that newer Chrome exposed, not a regression. Diagnosed by rendering each icon under a macOS-style squircle and looking at it, not by counting pixels (a pixel count alone pointed at the wrong fix): - icon-192 / icon-512 / apple-touch-icon were a dark rounded tile on an OPAQUE WHITE square. The squircle clips that white off at the canvas edge, so these looked fine: the older install. - icon-maskable-512 was that same white-cornered icon shrunk onto a dark canvas. Its white corners sit inside the safe zone, where the squircle does not reach. Newer Chrome prefers maskable icons on macOS, so new installs showed exactly the reported tile-in-a-tile. A first attempt copied the maskable art into the plain slots. It cleared the corners but would have spread the inset white to every icon; caught by locating the remaining white, and reverted before commit. Fix: take the F and gold dot from the plain icon and flatten everything else (the white, its soft edge, the inner tile) onto one uniform tile colour #1a1a22. The white is unsaturated while the purple F and gold dot are strongly saturated, so it separates cleanly by colour. Every size is derived from that: 512/192 full size, 180 apple-touch (RGB; iOS rounds it itself), and the maskable 512 with the logo scaled to 80% so it sits well inside the safe zone. Verified: 0 near-white pixels in all four (was 5388 in icon-512); the 512's purple and gold pixel counts are identical to the original (28284 / 1926), so the logo is untouched; the smaller sizes scale in proportion; every corner is #1a1a22. Rendered under the squircle, all four show a single clean tile. Existing installs keep the icon they were installed with. Reinstall the app on the affected machines after deploy to pick this up.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Chrome desktop installs on two newer machines showed the Familiar icon as a
tile inside a tile with white corners; an older install looked right. No icon
had changed since the July public snapshot, so this was a latent defect that
newer Chrome exposed, not a regression.
Diagnosed by rendering each icon under a macOS-style squircle and looking at
it, not by counting pixels (a pixel count alone pointed at the wrong fix):
WHITE square. The squircle clips that white off at the canvas edge, so these
looked fine: the older install.
canvas. Its white corners sit inside the safe zone, where the squircle does
not reach. Newer Chrome prefers maskable icons on macOS, so new installs
showed exactly the reported tile-in-a-tile.
A first attempt copied the maskable art into the plain slots. It cleared the
corners but would have spread the inset white to every icon; caught by
locating the remaining white, and reverted before commit.
Fix: take the F and gold dot from the plain icon and flatten everything else
(the white, its soft edge, the inner tile) onto one uniform tile colour
#1a1a22. The white is unsaturated while the purple F and gold dot are strongly
saturated, so it separates cleanly by colour. Every size is derived from that:
512/192 full size, 180 apple-touch (RGB; iOS rounds it itself), and the
maskable 512 with the logo scaled to 80% so it sits well inside the safe zone.
Verified: 0 near-white pixels in all four (was 5388 in icon-512); the 512's
purple and gold pixel counts are identical to the original (28284 / 1926), so
the logo is untouched; the smaller sizes scale in proportion; every corner is
#1a1a22. Rendered under the squircle, all four show a single clean tile.
Existing installs keep the icon they were installed with. Reinstall the app on
the affected machines after deploy to pick this up.
Opened automatically after the
tierscheck passed on7dea31a7.The check is attached to this branch head, so this is mergeable now.