Question

Hopefully someone can help me figure this one out. I’ve tried countless things and I can’t seem to figure this one out.

Using google chrome, this is what I see. The noticeable part is the icons of the navbar:

and scrolled to the bottom:

As you can see, the font weight is completely different and affected simply by scrolling. This behavior seems to happen only on Chrome on OSX, currently running 23.0.1271.95 (latest)

I have tried to force the weight on the font, with !important even — it will alter the weight, but as soon as i scroll it will lower the weight for no apparent reasons. Any hints as to what could be causing this problem, and how I can possibly fix this, to ensure my website renders properly everywhere?

Answer 1

Most likely something is causing the browser to disable subpixel font antialiasing after you scroll the text. This could be any kind of CSS transformation, transparency, etc. On OSX, this will make the text look much less bold (see here for more on this: Unwanted Bolding added to font in browsers)

The solution is to pre-emptively disable subpixel font antialiasing. Apply this to your nav bar’s CSS:

#navbar {
  -webkit-font-smoothing: antialiased;
}