Emoji sfocati su Chrome

Ciao! Ho notato un bug molto sottile, le emoji sono sfocate perché sono ridimensionate. Ho cercato e mi ha portato a questo:

ma non sembra mai essere stato risolto. Ho seguito il post e ho testato questo in Chrome e Firefox, ma solo Chrome ha il problema

A titolo informativo, le risposte combinate del post SO collegato risolvono il problema:

-webkit-filter: blur(0px);
-webkit-transform: translate3d(0, 0, 0);

:melting_face: Emoji di esempio

:melting_face: Testo di esempio

1 Mi Piace

Potrei sbagliarmi, ma anche le immagini del profilo sembrano a bassa risoluzione su Chrome.

1 Mi Piace

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:

Screen Shot 2022-04-13 at 11.36.03 AM

Altri esempi:

72 / 36 = 2 :white_check_mark: emoji nitida

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: emoji sfocata

Screen Shot 2022-04-13 at 11.38.54 AM

Renderizziamo le emoji a 20px, quindi:

72 / 20 = 3.6 :x: emoji sfocata

Screen Shot 2022-04-13 at 11.43.56 AM

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 :thinking:

3 Mi Piace

Oppure possiamo aspettare i font a colori :sweat_smile:

Non vedo l’ora di vedere un ampio supporto per un formato di font a colori. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

4 Mi Piace

Non c’è stata una discussione sui font a colori in questo argomento?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

2 Mi Piace

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.

1 Mi Piace