Question

In Chrome, the computed “top” property of an element may not be the same as the “top” property as specified by setting its style. This is causing me problems with animation. It seems that jQuery animate starts by looking up the current computed style, but it updates by setting the specified style.

I’d like to know how best to work around this.

I have created a
simple example of the problem. In Firefox, type in a value in the box, e.g. -500, then click Go, and it will animate the “top” property of the ruler so that the needle points to 500. Type in 499 and click Go, and the ruler will hardly change. Now try the same thing in Chrome, with the zoom set to 83%. When you go from 500 to 499, there will be a big jerk in the animation. This is because jQuery is starting from the computed top which is -416px, then animating it to the specified top which is -499px.

Update. One person suggested using percent values rather than pixel values for the animation. That works — thanks! Is there a better way which will let me stick with my old pixel-based code?

Answer 1

If there’s a difference between style position and jQuery calculated position, then make jQuery calculate the start position before it begins, thus eliminating the difference. Assuming your style says the element is positioned at:

.mydiv {top:120px;}

But when you begin animating the div, Chrome thinks the element is at 111px instead…

So, have jQuery get the top position for your starting point, and animate from there instead.

var thePosition = $('div.mydiv').offset();
var endLeft = thePosition.left - 500;
var endTop = thePosition.top - 500;
$(div.mydiv').animate({top : endTop, left : endLeft}, 'fast', function(){
    // do something on end
});