Website Font Settings schlecht lesbar unter MacOS

[Foxel]

Die Website von ComputerBase benutzt im CSS

-webkit-font-smoothing: antialiased;

Das hat zur Folge das unter MacOS das System Font Smoothing abgestellt wird, und den Text zu dünn und schlecht lesbar macht. Vorallem ist das auffällig im Dark Mode.

Hier der Unterschied:

Erstes Bild ist mit der CSS Rule von ComputerBase, Das zweite ohne dem Setting. Die zweite Version würde auch in etwa der dicke entsprechen wie es Windows rendert.

Das Problem betrifft nur MacOS bei aktiviertem Font Smoothing. Dies ist immer Default aktiv bei MacOS.

Mein Vorschlag wäre diese CSS Rules zu entfernen.

 

[Steffen]

Was ich dazu zuletzt gelesen hatte war, dass unter macOS ausschließlich Browser noch Subpixel-Antialiasing nutzen und es an allen anderen Stellen/Apps nicht mehr genutzt wird, da es ein Relikt aus LoDPI-Zeiten sei und auf HiDPI-Displays nicht erforderlich sei. Deshalb solle man es auch im Browser abschalten.

Hier steht mehr dazu: https://dbushell.com/2024/11/05/webkit-font-smoothing/

 

[Foxel]

Da man das Problem nur mit einem nicht HiDPI-Display hat, habe ich mir mit der Chrome Extention Stylus ein User CSS definiert. Diese entfernt nur dann die Regel wenn man kein HiDPI hat.

@media only screen and (-webkit-max-device-pixel-ratio: 1) {
    body {
        -webkit-font-smoothing: unset !important;
    }
}

Das löst mein Problem immerhin auch auf anderen Seiten. Und die Font sieht so aus wie unter Linux oder Windows. Der Anteil der Nutzer unter MacOS die kein HiDPI Display haben ist wohl viel zu gering weshab sich diese CSS Rule so verbreitet hat.

Wollte nur mein 3840x1600 Pixel Monitor mit 111DPI noch ne Weile benutzen 😅.

 

[norKoeri]

Keine Ahnung ob das hier rein gehört, weil ich einen High-DPI-Monitor habe. Aber auf meinem aktuellen Apple-Computer (14" MacBook Pro, Display Integriert und auf Auflösung auf Standard) sind einige Texte gänzlich ohne Kantenglättung. Egal ob eingeloggt oder nicht, egal ob Dark oder Hell.

• Wenn ich oben auf Suche klicke, ist die Lupe und die Schrift in der Taste Suche gänzlich ohne Kantenglättung. Neben dran die Taste „Erweiterte Suche“ ist perfekt.
• Tool-Tipps:
  • im Editor, z.B. wenn ich „B“ hoovere, erhalte ich „Fett (⌘B)“ als Einblendung Diesem Text fehlt die Kantenglättung.
  • Tasten unten links bei „Teilen“, also z. B. Reddit
  • Taste „Ignorierten Inhalt anzeigen“
  • wenn man einen Text ausgewählt hat, erscheint: + Zitat | „ Zitieren. Alles ohne Kantenglättung.
• Taste Antworten, während man einen Post erstellt, sowohl Text und Icon (Pfeil).
• Taste Speichern, während man einen Post editiert, sowohl Text und Icon (Diskette). Neben dran die Taste „Abbrechen“ ist perfekt.

 

[Steffen]

@norKoeri Das sollte nun behoben sein! Hatte nichts mit Anti-Aliasing zu tun, sondern an den betroffenen Stellen hat XenForo (je nach eingestellter Farbpalette) für die "hsl()"-Farben im CSS Luminosity-Werte berechnet, die um ein Vielfaches höher als 100% liegen, was in Safari zu einem Font-Rendering führt, das so aussieht, als sei kein Anti-Aliasing aktiv. Jetzt wird die Textfarbe an manchen Stellen fest auf Weiß gesetzt.

 

[norKoeri]

Also betraf das (nur) macOS Safari? Ja, die Tasten Suche, Antworten und Speichern sind jetzt ebenfalls schön. Suppi! Leider bei keinem der oben aufgezählten Tool-Tipps, die sind weiterhin betroffen. Weiterhin sowohl im Dark- als auch Hell-Theme.

 

[Steffen]

Ja, bei browser-spezifischen Frontend-Bugs ist fast immer Safari der betroffene Browser.

Tooltips sollten nun ebenfalls passen!

 

[norKoeri]

Jepp, alles paletti.

Ergänzung (30. Dezember 2024)

Oh ne, und schon habe ich die nächste Stelle gefunden: Die orange Taste „Thema erstellen“ oben in den Sub-Foren.

 

[Steffen]

Sollte nun ebenfalls passen!