0

This "just another blurry icons issue" is starting to give me serious headaches, that's why I decided to ask for some help here. And believe me, I have already read all the 'blurry icons' articles on the web.

The image below shows what's happening with the font icons on github.com when you resize the browser width, switching between odd and even values.

But the problem comes from somewhere else, it comes from some parent element (.container) which centers itself using margin-left/right properties set to 'auto'.

All the icons are properly grid-aligned, they all have font-smoothing: antialised, and the SVG font is already moved in front of the .ttf one. So no, it's not one of these problems. It's strictly related to how the browsers render the font icons when you have a parent container center aligned by using margin auto.

Any ideas how to fix this without changing the margin property of the self-centering parent container?

Blurry font icons on github

Adrian Puescu
  • 162
  • 12

1 Answers1

0

Struggling with the same issue myself. At least in my case, it seems to be caused by the icon glyph's horizontal position ending up at a sub-pixel value (e.g. at 99.5px instead of 100px). This can be caused by a lot of different situations, such as horizontal centering (as in your case).

Unfortunately, I'm not aware of a workaround other than adjusting the icon's horizontal position case-by-case, e.g. by applying a sub-pixel margin that adjusts the icon's position back into the pixel grid (e.g. margin-left: 0.25px).

Rolf
  • 2,178
  • 4
  • 18
  • 29