Font smoothing issue on non-retina screen with desktop safari

jdan / 98.css

A design system for building faithful recreations of old UIs

https://jdan.github.io/98.css

MIT License

9.51k stars 308 forks source link

Font smoothing issue on non-retina screen with desktop safari #13

Open muratcorlu opened 4 years ago

muratcorlu commented 4 years ago

If you open the page in an external(non-retina) screen in latest Safari on MacOS Catalina, font smoothing doesn't render properly. Here is a screenshot:

grstreten commented 4 years ago

Echo of this on an  Thunderbolt Display with macOS Catalina.

jdan commented 4 years ago

Yikes! Sorry about this. Wondering if the letter-spacing I just removed will fix this, or if I need to make sure not to remove -webkit-font-smoothing for this scenario.

muratcorlu commented 4 years ago

I also played with it but couldn't find an easy solution. I'll also try playing with letter-spacing.

muratcorlu commented 4 years ago

Disabling letter-spacing doesn't help.

jdan commented 4 years ago

Hey @muratcorlu!

We disabled font-smoothing when we brought the new font in. Wanna take a look at https://jdan.github.io/98.css (hard refresh with command+shift+R) and let me know how it looks?

grstreten commented 4 years ago

Whilst I'm yet to check on a non-retina display, rendering in Safari is looking a little funky now. Apologies if this needs a separate issue, happy to raise it in one. Verified it's not occurring in Chrome.

muratcorlu commented 4 years ago

Hi @jdan

Here is the latest situation:

jdan commented 4 years ago

Ran into a fun one: https://github.com/jdan/98.css/issues/68#issuecomment-620060479

I know nothing about web fonts :)

jdan commented 4 years ago

It's almost as if the space ruins it!

Hey @muratcorlu if you modify the "My First Program" header into "MyFirstProgram" does it go away?

muratcorlu commented 4 years ago

@jdan yes, without spaces it looks good.

muratcorlu commented 4 years ago

Same applies for dialog content text. Without space, it's ok. What is the cause for this? 🤯

dertuxmalwieder commented 4 years ago

It also looks like that on a Retina MacBook Pro, so the non-Retina is not the issue here.

DannyJJK commented 3 years ago

I'm not sure if this is an issue any more, it looks good on Safari 14.1.1 (16611.2.7.1.4)

dertuxmalwieder commented 3 years ago

The "dialog" seems to be fixed, but the tree and dropdown boxes still look strange on Retina (Safari 14 TP).

muratcorlu commented 3 years ago

Here is the current situation for me on Safari 14.1.1 and on an external (non-retina) display.

It's way better. But still some letters in that thin font overlapping.

rolandcrosby commented 3 years ago

Yep, I'm using an old non-Retina MacBook Air (Safari 14.1), and I see the same kerning issues as @muratcorlu is seeing. I don't believe there are any missing pixels or mis-rendered individual characters like in @dertuxmalwieder's screenshot, though.

dertuxmalwieder commented 3 years ago

If it helps, both XP.css and 7.css don't have these problems for me.