jdan
Font smoothing issue on non-retina screen with desktop safari
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:
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.
I also played with it but couldn't find an easy solution. I'll also try playing with letter-spacing.
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?
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.
Ran into a fun one: https://github.com/jdan/98.css/issues/68#issuecomment-620060479
I know nothing about web fonts :)
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?
Same applies for dialog content text. Without space, it's ok. What is the cause for this? 🤯
It also looks like that on a Retina MacBook Pro, so the non-Retina is not the issue here.
I'm not sure if this is an issue any more, it looks good on Safari 14.1.1 (16611.2.7.1.4)
The "dialog" seems to be fixed, but the tree and dropdown boxes still look strange on Retina (Safari 14 TP).
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.
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.
If it helps, both XP.css and 7.css don't have these problems for me.