Question

I’m trying to create a small slider where jquery UI Scale brings out and image Div and scales out the first one. My problem is, when it gets scaled in Google Chrome it shakes a bit while its in the process of scaling. In IE or firefox it works like a charm no vibrating/shaking at all!

Now I tested that when I don’t use background-position:center in css it doesn’t shake anymore but If i take this out then it doesn’t look like its being zoomed out from the center of the image anymore.
What can I do to get rid of this?
Here is an example(Open it with Chrome) http://jsfiddle.net/gqLZe/

Answer 1

Putting the animation in slow motion (very long duration), I can see that the bottom of the div actually moves up a pixel occasionally – which is what is causing the shaking. Watching it in the style inspector, I can see that jQuery is setting each of the position properties of the div to a decimal, and the position of the div actually changes each time one of those decimals passes a whole number. Since the top and height don’t necessarily pass a whole number at that same time, you get the shaking. On the other hand, the left and width do appear to always pass a whole number at the same time, though I can’t tell for sure whether that’s the case. In any case, I haven’t been able to distinguish any horizontal shaking.

Apparently Chrome is truncating any decimals in the position properties, whereas the other browsers are using floating-point arithmetic to calculate the boundary of the div in absolute coordinates before any rounding or truncating. I’m not sure whether this qualifies as a bug or not (would have to examine the spec), though it’s likely something that will get fixed/improved eventually. It probably does qualify as a bug in jQuery, since jQuery is supposed to work around such browser peculiarities.

Fixing this problem requires providing a different scaling algorithm. One solution is to compute in JavaScript the values that the other browsers are computing automatically, and provide only whole numbers to Chrome, as in this jsFiddle: http://jsfiddle.net/gqLZe/1/

That method may cause a similar problem in other browsers when a containing element has a noninteger top or left (including due to border or margin), but so long as you stick to whole numbers, it should work fine.

An alternate solution would be to provide a parent element of the size that you want the div to expand to, and animate on right and bottom rather than on width and height. This can be done very simply using jQuery’s animate():

var width = $(".frame").width();
var height = $(".frame").height();
$(".frame").css({
    top: height / 2 + "px",
    bottom: height / 2 + "px",
    left: width / 2 + "px",
    right: width / 2 + "px"
}).show().animate({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
}, 3000, 'linear');

jsFiddle: http://jsfiddle.net/gqLZe/3/

That’s probably the way to go, if you can endure having an extra markup element.