Sono abbastanza sicuro che sia correlato a come Chrome ridimensiona le immagini, se ad esempio apri l’ispettore del browser e imposti un emoji alle dimensioni intrinseche (72px quadrati in questo caso)… l’immagine è nitida:
Altri esempi:
72 / 36 = 2 emoji nitida
72 / 37 = 1.945 emoji sfocata
Renderizziamo le emoji a 20px, quindi:
72 / 20 = 3.6 emoji sfocata
In teoria questo problema scomparirebbe se usassimo immagini da 60px per le emoji invece di 72px? Anche se mi chiedo se sia correlato alla densità dei pixel/ridimensionamento… alcuni dispositivi usano 2X, altri usano 3X
SVG e font a colori sarebbero un modo migliore per risolverli, ma sto ancora sostenendo la soluzione solo CSS, il CSS non è la mia specialità, ma questa sembra quella che causa meno problemi.