Why are slow jQuery animations choppy?

Question

I\'m having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding

Answer 1

It's not much smoother even using a CSS transition.

I added the Transit jQuery plugin to test a CSS transition instead, and it looks almost the same.

Your code with minor fixes: http://jsfiddle.net/thirtydot/93Bqx/5/

Same code but with Transit added: http://jsfiddle.net/thirtydot/93Bqx/6/.

I think this is a limitation of the fact that (most?) browsers don't do subpixel rendering. As you mentioned, the x and y of the element is rounded after every step of the animation, and it's this rounding that causes the unsightly "jiggling" effect.

The CSS transition version does look noticeably better for less pathological test cases. Read this for more information: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/