Animation disables font in Internet Explorer

Sep 22, 2010 · Follow on Twitter and Mastodon javascript

Yesterday, I built a simple demo page to demonstrate how easy it is to get Web Fonts up and running. However, as I did, I noticed that Internet Explorer disables custom fonts during animations.

As the animation starts, Internet Explorer started disabling the fonts, falling back to the original fonts.

However, it turns out that it wasn’t a limitation in Internet Explorer, but rather a bug in the animation code.

Turns out that this button code’s trailing comma made Internet Explorer fail:

<button onclick="$('.comic').animate({fontSize: '3em', });">Click me!</button>

Removing the comma fixes the font disabling bug:

<button onclick="$('.comic').animate({fontSize: '3em' });">Click me!</button>

Thanks for not any exceptions at all, IE!

Discussions & More

Please share any ideas, feedback or comments you may have in the Disqus section below, or by replying on Twitter or Mastodon..

If you found this text interesting, make sure to follow me on Twitter and Mastodon for more content like this, and to be notified when new content is published.

If you like & want to support my work, please consider sponsoring me on GitHub Sponsors.