I kept encountering this strange glitch in Chrome when using jQuery’s .fadeIn() effect on a text element. The text would fade in properly, but then flicker to a slightly bolder weight. The text wasn’t bold, so I couldn’t figure out what was going on.
It turns out that in IE 8 (and lower) and in Chrome on some operating systems, the text loses its ClearType while fading, and then has ClearType activated once it’s fully faded in. This causes a distracting jitter. Thankfully there is an easy fix. Add the following to the CSS selector for the text element:
-
opacity:0.99;
-
filter:alpha(opacity=99);
This will make the element fade in to only 99%, thus preventing ClearType from engaging, and smoothing out the transition.
