Nes.css: Rendering issues with safari.

Created on 4 Dec 2018 · 5Comments · Source: nostalgic-css/NES.css

Safari is terrible at rendering NES.css

dec-04-2018 15-35-25

bug

Source

evexoio

Most helpful comment

It seems that setting -webkit-font-smoothing: antialiased works in safari while still preventing sub-pixel antialiasing to keep those letters crisp :)

jjspace on 4 Dec 2018

👍3

All 5 comments

What is going on? 😱
safari

BcRikko on 4 Dec 2018

😄2

This code may be the cause. 🤔
https://github.com/BcRikko/NES.css/blob/1663f704c194818460ad4b2cf7d0cb1e8c25f868/scss/base/generic.scss#L16

I commented out -webkit-font-smoothing: none;.
2018-12-04 23 08 53

but Anti-aliasing will work if I remove this code. 😭 -> #40

BcRikko on 4 Dec 2018

😄1

It seems that setting -webkit-font-smoothing: antialiased works in safari while still preventing sub-pixel antialiasing to keep those letters crisp :)

jjspace on 4 Dec 2018

👍3

@jjspace can you create a PR of that please?

evexoio on 4 Dec 2018

It seems -webkit-font-smoothing: none; doesn't break the styles in Safari, at least in v13.1.1 which I just tested.

In Safari there's very little difference between none and antialiased, but I see a significant different in Chrome. With none it's sharper and cleaner (in my opinion).

Just in case you wanted to reconsider using -webkit-font-smoothing: none;