Search code examples
javascriptgoogle-chromefontsflexslider

Chrome render bug when sliding images

I'm using a JS slider called Flexslider and have discovered a strange text rendering issue. When the image switches to the next one Google Chrome (Windows/OSX) seems to change the font weight on all text elements on the web page. This issue doesn't occur in FF/IE.

Do you know why this is happening? I've tried using different fonts without success. Please have a look at my example screenshots to see the difference.

Normal image

When sliding

Solution

  • This is most definitely because the slider script uses hardware-accelerated css transforms. It has been known to change the antialias technique when applied to webkit, even to unrelated elements. Here is a demo that proves it: http://jsfiddle.net/378pN/

    You can’t really do much about it. If you want to keep using css transforms, you will need to change the way the browser antialiases the texts. You can force it to use the skinnier version (I think it’s "normal" antialias, not sub-pixel) by adding:

    html{-webkit-font-smoothing: antialiased;}

    Demo: http://jsfiddle.net/378pN/1/

    This way it won’t change the way it renders text when adding CSS transforms.