Javascript

Fixing Slow jQuery Animations in Internet Explorer

September 3, 2009   ·   By   ·   29 Comments   ·   Posted in Javascript, jQuery

I’m not going to lie:  I’m a javascript hack.  I dont know what I’m doing half the time, because I don’t have to use it all that often.  jQuery is seriously my saving grace when it comes to appearing to know what I’m doing with javascript.

That said, I’m currently working on a project that requires quite a bit of javascript work – specifically involving some animations – slideUp and slideDown stuff mostly.  I put it all together, and it worked beautifully in Firefox and Safari on my mac – smooth animations, perfect transitions.  As though I knew what I was doing.  I fire it up in IE7 just to be sure, and it’s a nightmare.  You can’t really call it “animation”.  Slow, choppy, and unpredictable – legitimately unusable.

A bit of googling around revealed that apparently no one else in the world has this problem, and I am an idiot.  Then I happened upon a gem at stackoverflow.com which mentioned, in passing, that Internet Explorer does an awful job of caching and displaying background images (specifically repeated background images) during animation – basically, he implied that for each frame of animation, I.E. loads, places, and renders each instance of a repeating background image, just one example of how a browser could have issues with animations. The specific elements I’m working with are 1000 px wide rows, and with each animation, about 10 of them have to move 300 pixels or so.  The kicker?  Each one is using a 1px wide repeating background.  1000 background images * 10 rows, and it becomes apparent why the animation was so bad.  I bit the bullet and tried a single 1000px wide background image, and the difference was night and day.

The moral of the story is this: the css techniques you use on elements that will be animated can have a serious affect on animation performance.  If you’re having problems, give some real thought to what the browser will have to do to animate the elements – calculating heights, margins, widths, background images, etc etc.  Experiment with different values, with an eye toward explicitly defining any value that the javascript might have to calculate (i.e. define heights instead of just letting the browser do it), and you can probably make a big difference in your javascript animation quality.

29 Comments
  1. V.

    Wow, you’re the only person who’s written something about the exact issue I’m having.

    I’m using a large (but well compressed), unique image as a background on the body element, and then the site navigation involves some jQuery to move content around on the page.

    In Firefox, Opera & Safari, it’s smooth as ice. In Internet Explorer, it’s so choppy it’s unusable. Considering the whole site concept is based around having a large, impressive background to help frame the content, it’s practically made the concept worthless.

    Having only spent a day on implimenting the design, it’s not a huge waste of time, but I’m going to have to rethink the design concept and will one day something we won’t have to worry about!

  2. Glad to hear this was helpful V – and I too was surprised that no one else is writing about it. Given the ease of animating with jQuery, I would have guessed it would be an oft-discussed topic.

    That’s too bad that it looks like you’re going to have to rethink your design – IE claims another victim..

  3. kooosto

    So, no workarounds with IE+animations+big bg image? I met the same problem just now. I’ve got an idea to use absolulty positioned image instead.

  4. I’m having the same problem, in this case because I’m attempting to use an animated jQuery dropdown menu over a background image, in a div that floats over a Flash movie. The performance issue only affects IE, and only when I use the dropdown menu on a page that also has Flash. Very bizarre, but it appears to be caused by the use of the animation in a top layer.

  5. Andrew

    I saw a suggestion somewhere to use this for IE to enable background caching, I’m just saving it for later (haven’t tried myself yet):

    document.execCommand(“BackgroundImageCache”, false, true);

  6. Good post dude, your saving lives lol.

  7. I’m not sure on the ‘great posts saves lives’ but it is reassuring to know tat other people have come across this issue.

    Not sure how to resolve it, that’s partly been left out, just more of a statement on a problem and how it came about.

  8. I too am having the same problem. I have a repeating background image that only affects IE. My JQuery is very choppy and I have images that are change on an infinite loop using javascript and none of it works right in IE but it is fine in Firefox. If I take out the background image and use a background color everything works fine. I really like the background image better but I will have to remove it until I find a fix.

    • Robert, have you tried just making the repeating background image much bigger (i.e. if you’ve got a 10×10 repeating image, put 10 of them together so it’s 100×00)? Doing that allowed me to keep my background image, but fix the performance issues.

      • That fixed the problem! Thanks for the suggestion.

      • Making the Background image into one big image instead of repeating smaller images helped but the animations continue to be choppy in IE. It works better with the large background image instead of repeating smaller images but it still is much slower and choppier in IE. FF works great. I may still have to remove the background image. This is the url if you want to see what I’m talking about http://www.rwilliamsonline.com/sichuan.asp

        The header fades to a new image from a background image and the logo slides in from the left. It’s choppy in IE, Look at it in FF and you will see a huge difference.

  9. Thomas

    I have had similar problems with IE (I don’t use jQuery, but the issue is the same) simply by having regular images on a page. I have found that:

    a) If you have an image that is not shown as it’s native size (eg resized down, even by 1 pixel) IE slows right down when animating anything.
    b) If you use and .png images with transparent portions IE slows right down.

    This is true in IE 6, 7 and 8 (haven’t tried 9). It doesn’t matter if the images are involved in the animation or not, or in the background or not, as the entire page is redrawn on every frame.

    You can get quite a bit more performance by making sure all images are shown in their native format, and you don’t use .png with transparent alpha.

    • Good stuff Tom, thanks for the extra info!

  10. A

    I have an animation that works perfectly (fast, smooth, really amazing etc) in html 3.2!! I put the doctype as 4.0 transitional and it slows right down and becomes jerky. Works perfectly in firefox, chrome, safari, etc. How is html 3.2 better than 4.0??

    And I’ve just about pulled my hair out making sure every single line is 4.0 compatible.

    • A

      oops, forgot to say (a symptom of me going crazy over this problem), but the problem is only in IE under doctype 4.0 transitional. Works everywhere else including html 3.2 in IE. If I figure it out the problem I’ll repost.

  11. Pat S

    This post is mucho helpful.

    Had a similarly confounding experience with scrollTo and using background-image with horizontally repeating gradients (overall background and smaller divs). After checking this out, I used the Microsoft gradient filters instead (css3please.com) and it took away the delay entirely, and the animation is nearly as fast as if I removed the background-images entirely.

  12. Thanks for the post! I’ve been having the same issue as many other commenters here: a repeated background was causing the animation of another element to chug in IE7.

    In my case, I was using a 3×3 non-transparent 8-bit PNG. Swapping it for a GIF solved it.

  13. Andre

    Hey, what about we start develop to all browser except ie? we could add an if clouse onload, if was IE user we’d start poping links to download firefox, chrome or whatever.

    I’ll start doing it today.

  14. Thank you very much! Much, much better performance now :-)

  15. Ben

    Thanks for the post. I makes me really sad. And angry. Damn IE! I have been working on the layout for weeks now (private project) and the whole point is to have a background image. WTF should I do now? :-(
    Special thanks to Thomas, who pointed out that non-native image size and png transparency totally stuff up the performance. And my layout is based on BOTH of those! *cry*
    After making the background pic native sized, the page is usable once more (despite having transparent pngs), with only very slight ‘stuttering’.
    Have to come up with a way to make this work. Store different image sizes on the server and serve different sized images depending on the screen size? *yuk!*

    Thanks, Microsoft.

  16. That’s why I won’t use Jquery. Most of the scripts are made by hacks and idiots and are not backwards compatible with older browsers which means losing a percentage of your target audience. That is entirely unnaceptable if you value business.

    ps: It’s better to learn actual Javascript than some dodgy library built on top of it.

    • Have you even looked at jQuery? Its level of compatibility is amazing, the problem talked about in this post has nothing to do with jQuery. Its to do with an obsolete browser that idiots still persist on using, and bigger idiots persist in supporting it. Myself included.

      • Timothy, if I’m animating something using jquery, and it’s choppy, then it has to do with jQuery. It may not be jQuery’s fault, but that’s irrelevant when trying to solve the problem.

  17. You are a life saver….I tried all possible things as i thought its happening because of memory leak…..but, luckily I found this post and the problem was fixed…………Thanks a ton

  18. I’m having the opposite issue with a jQuery animation and a background image.

    Image is about 400K in size, and the animation is really smooth in Firefox 11, Safari and IE8, but really jerky in Chrome.

    Also being a bit of hack with programming, I have no idea where to start checking. Definitely to do with the image as when I take it off it runs smoothly in Chrome.

    Anyone got any ideas?

    It’s at http://www.alphagrid.co.uk/hpac/index.html

    • Kostas

      Sure 4D, That’s pretty easy to fix. Just remove the background image assigned to the tag and add it to the tag instead.

    • Kostas

      Gah. I meant remove the background from the HTML tag and add it to the BODY tag instead.

      • Brilliant.

        That’s fixed it right up.

        So why would that cause the issues I was seeing?

  19. Dev

    Does it have a similar issue with a large div consisting of hundreds of divs within it? I am facing a lag and it jumps while animating.

Submit a Comment