Font/Text distortion on animate() and opacity in Internet Explorer

I have a HTML div which will be shown from hidden to visible by changing the opacity with jQuery animate(). It works fine in normal browser like Chrome and Firefox. But from the abnormal browser like Internet Explorer, the font/text is distorted.

Internet Explorer has problem with opacity and font antialiasing in animate(). A workaround is to remove the opacity after the animation is completed.

$("#my-div").animate({opacity: 1},500, function() {
  $(this).css('opacity', '');


But this is still not a good solution because the text is still distorted during the animation. We either give up the opacity change or we ignore Internet Explorer. The latter one seems better. haha~~

Done =)

Reference: StackOverflow – Font-family renders poorly in Explorer with jQuery animation


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.