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.