Why are my jQuery animations choppy in webkit-based browsers?

Question

I'm working with a very simple animation: sliding a line of images to the left:

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

(It's supposed to be an image gallery; I hide the overflow to show only one image at a time.)

Anyway, despite trying various easing parameters, even at slow speeds the animation was very choppy in Chrome and Safari, but always smooth in Internet Explorer and Firefox. (Most issues raised online are about IE or Firefox being choppy!)

I found the cause, for me. It's a very special case that probably won't apply to most, but maybe it'll help someone regardless. I'll post my answer below. (The site guidelines allow this, I think.)

Answer 1

For me, it didn't make a difference if it was 24-bit PNGs, 8-bit PNGs, GIFs, JPEGs, etc., if there was a large image on the screen there were issues with my animations. If you have elements z-index'ed above a large image, try adding this CSS to your element:

-webkit-transform: translateZ(0);

For me, it worked, but it left animation artifacts.

What finally solved it for me was to simply change this:

$('#myimage').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

To this:

$('#myimage').animate({
    height: '-=1'
}, 1, 'linear').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

I just added a small 1 millisecond animation onto the beginning. My thinking was it would possibly "prep" Chrome for the real animation coming up, and it worked. You may want to change it to 20 or 50 milliseconds to be safe.

Answer 2

In my case, the issue wasn't with the code, but with the images--specifically, large images that have been (forcibly) scaled down via the css width property. Of course larger images might take more processing to animate, but IE and FF seems to handle them just fine scaled down (in my case, images 2000px wide were scaled to be 800px wide). Meanwhile, it appears that Chrome and Safari get bogged down animating such images. Once I batch-shrunk all my images in Photoshop to actually be 800px wide, the animations were smooth everywhere.

Other details. I'm using jQuery 1.7. I encountered the issue for animating the img element itself, as well as a div element with a background image.

Answer 3

I realize this thread is old, but in the interest of efficient coding..., I ran into a similar issue with choppy animations using Chrome recently and in searching for a solution, came across this thread(but not FF or IE) traced the issue to one of my collapse icons using a png as opposed to a gif (as soon as I swapped the png for a gif) the webkit browser had no issues producing smooth animations (but as soon as I swapped the png back in, my animations were once again choppy...)