Home/ Questions/Q 8889063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:10:13+00:00

I’m using a JS slider called Flexslider and have discovered a strange text rendering

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0