WordPress / browsehappy

101 stars 36 forks source link

@font-face bug #21

Closed bboysupaman closed 7 years ago

bboysupaman commented 9 years ago

There is an issue in Safari browsers with the elements with an applied @font-face. The font-weight of said elements changes when one hovers over other elements on the page.

To reproduce the issue, simply open the page in Safari (I used Safari 8.0.1). Ensure that the footer is in view and hover over any of the “browser blocks” and you will observe the font-weights changing.

This seems to be due to Safari’s implementation of antialiasing. I have found the following to be the solution to this issue on some of my own pages in the past.

The fix involves add CSS rule to style.css. Add "-webkit-font-smoothing: antialiased;" to CSS rule beginning on line 12.

bboysupaman commented 9 years ago

I'm still learning how GitHub works... But I created a fork and submitted a pull request.