Font smoothing issue on non-retina screen with desktop safari

[muratcorlu]

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]

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

[jdan]

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]

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

[muratcorlu]

Disabling letter-spacing doesn't help.

[jdan]

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]

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]

Hi @jdan

Here is the latest situation:

[jdan]

Ran into a fun one: #68 (comment)

I know nothing about web fonts :)

[jdan]

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]

@jdan yes, without spaces it looks good.

[muratcorlu]

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

[dertuxmalwieder]

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

[DannyJJK]

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]

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

[muratcorlu]

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]

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]

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