Question

How can I avoid text flickering at the very end of an animation [ fadeIn( ) or animate( ) ] when using jQuery? This seems to only happen for font size < 40px.

See the problem in the fiddle: http://jsfiddle.net/HV7Az/8/

As you’ll notice, the only solution I’ve found is to animate the opacity to 99% instead of 100%. This seems like a poor solution to me.

I’ve tried using various HTML formats, like fading out a parent div instead of the actual text.

Answer 1

I haven’t tested this cross-browser, but with webkit-based browsers I believe it has something to do with the GPU acceleration. I tested my theory by adding the following:

.animate-99, .animate-100 {
opacity: 0;
-webkit-font-smoothing: antialiased;
}

With this in place, I think the font is rendered and faded, where in your jsfiddle, it is rerendered when the opacity hits 100%. This may or may not be an issue in IE9/10/Gecko browsers; you’ll have to test there and see if you can trick the acceleration by antialiasing the text.