Iconița de pe ecranul telefonului e neagră pe negru, deci goală
frontend/public/apple-touch-icon.png e negru pe negru. Marca e desenată în
rgb(10,10,10) peste un fond rgb(0,0,0) — un raport de contrast de circa
1,03:1, adică nimic. Cine adaugă magazinul pe ecranul principal al telefonului
primește un pătrat negru gol.
Găsit în timp ce căutam un logo pătrat pentru altceva; am deschis fișierul și i-am numărat pixelii.
Ce am măsurat
frontend/public/apple-touch-icon.png — 180x180, PNG opac, 452 octeți
30.519 px rgba(0, 0, 0, 255) fondul
1.555 px rgba(10, 10, 10, 255) marca
96 px rgba(6, 6, 6, 255) marginile anti-aliasate
Marca ocupă 1.555 de pixeli din 32.400 și e cu 10 trepte mai deschisă decât fondul. Pe un ecran normal, invizibilă.
Cauza e felul în care a fost generat fișierul: marca din hyperice-logo.svg are
fill="currentColor", iar la randare culoarea moștenită a fost negrul, peste un
fond care e tot negru. Aceeași cauză probabil și pentru
apple-touch-icon.webp, care e fratele lui.
De ce nu l-a prins nimic
frontend/src/test/appleTouchIcon.test.ts verifică exact ce trebuie despre
formă — că e PNG, că e 180x180, că e opac, că adresa din index.html are ?v=
— și nimic despre conținut. Un fișier gol trece toate condițiile.
De făcut
-
Regenerează apple-touch-icon.pngcu marca albă pe fond negru, dinfrontend/public/hyperice-logo.svg, cu marca la circa două treimi din lățime și centrată -
Același lucru pentru apple-touch-icon.webp -
Fixează culoarea în pasul de generare din tools/image-optimizer/, cacurrentColorsă nu mai poată cădea pe culoarea fondului -
Adaugă în appleTouchIcon.test.tso condiție de contrast: culoarea cea mai deschisă și cea mai închisă din fișier trebuie să fie despărțite de un prag, nu doar fișierul să existe -
Ridică ?v=dinfrontend/index.html, altfel fișierul nou stă ascuns în spatele copiei vechi până la patru ore
Criteriu de acceptare
Pe producție, apple-touch-icon.png are marca vizibilă, iar testul pică dacă
cineva pune la loc un fișier cu contrast sub prag.