Unscharfe Emojis in Chrome

Unterstützung
1

Hallo! Ich habe einen sehr subtilen Fehler bemerkt: Emojis sind unscharf, weil sie herunterskaliert werden. Ich habe danach gesucht und bin auf Folgendes gestoßen:

aber es scheint nie behoben worden zu sein. Ich habe den Beitrag verfolgt und dies in Chrome und Firefox getestet, aber nur Chrome hat das Problem.

Nur zur Information: Die kombinierten Antworten des verlinkten SO-Beitrags lösen das Problem:

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

:melting_face: Beispiel-Emoji

:melting_face: Beispieltext

1 „Gefällt mir“
2

Ich könnte mich irren, aber auch Profilbilder scheinen auf Chrome eine niedrige Auflösung zu haben.

1 „Gefällt mir“
3

Ich bin mir ziemlich sicher, dass dies damit zusammenhängt, wie Chrome Bilder herunterskaliert. Wenn Sie zum Beispiel den Browser-Inspektor öffnen und einem Emoji die intrinsischen Abmessungen (in diesem Fall 72 Pixel quadratisch) zuweisen, ist das Bild scharf:

Screen Shot 2022-04-13 at 11.36.03 AM

Einige weitere Beispiele:

72 / 36 = 2 :white_check_mark: scharfes Emoji

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1,945 :x: unscharfes Emoji

Screen Shot 2022-04-13 at 11.38.54 AM

Wir rendern Emojis mit 20 Pixeln, also:

72 / 20 = 3,6 :x: unscharfes Emoji

Screen Shot 2022-04-13 at 11.43.56 AM

Theoretisch würde dies verschwinden, wenn wir statt 72px Bilder mit 60px für Emojis verwenden würden? Ich frage mich jedoch, ob dies mit der Pixeldichte/Skalierung zusammenhängt… einige Geräte verwenden 2X, einige 3X :thinking:

3 „Gefällt mir“
4

Oder wir warten auf Farbschriften :sweat_smile:

Ich freue mich darauf, eine breite Unterstützung für ein Farbschriftenformat zu sehen. COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

4 „Gefällt mir“
5

Gab es in diesem Thema nicht eine Diskussion über Farbschriften?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

2 „Gefällt mir“
6

SVGs und Farbschriften wären ein besserer Weg, um sie zu lösen, aber ich setze mich immer noch für die reine CSS-Lösung ein. CSS ist nicht meine Spezialität, aber das scheint die am wenigsten störende zu sein.

1 „Gefällt mir“