wrong top value in FF (correct in chrome)

[Sumit]

Hi there,

 

i built a JSFiddle to show the issue:

 

http://jsfiddle.net/kDAqE/

 

you'll see - firefox doesn't animate correctly from -30 to 0px. Instead the animation tweens to some random number - 94px in this case. Maybe it starts at the elements current position  calculated by the browser, forgets the CSS (top: -30px) and adds 30px. However it should start at the elements current CSS position which is -30px and add 30px.

Animation is correct in Chrome.

[jamiejefferson]

Thanks for the fiddle, it made it very easy to figure this one out.

 

You'll find that this problem is not directly related to anything GSAP is doing, but to how the 2 browser's are rendering your elements with the CSS you've used.

 

If you remove the Tween from your fiddle and replace it with

alert($('.inner').css('top'));

(here) you'll see that Chrome and Firefox are reporting different values for top (Chrome: -30px, Firefox: 64px). While GSAP might not be animating as you would have expected here, it is still actually working correctly by tweening top to its current value + 30.

 

It looks like Firefox is applying the margin: auto; to the position values instead of the actual margins, so in Firefox .inner effectively has margin: 0 while the top value is adjusted to its on-screen position.

 

Here's an adjustment to the page that work's fine in both browsers: http://jsfiddle.net/kDAqE/2/

[Sumit]

Thank you for pointing me to the browser differences.

I would still argue that GSAP is doing something wrong here.

 

Let's say the offset between inner and outer DIV is 50px. And now I use tween.FROM

Using relative values (-=30px), GSAP should tween the top value in

 

chrome: -30px to 0

firefox: 20px to 50px

 

Instead, GSAP is ignoring the top-value in Firefox and just adds 30px to 50px (calculated value).

 

Fiddle: http://jsfiddle.net/kDAqE/5/

[Rodrigo]

Hi,

 

Most definitely a firefox issue. Works fine even in IE9 and 10, but it gets solved by using a wrapper around the inner element, you can see it in this fiddle:

 

http://jsfiddle.net/rhernando/kDAqE/9/

 

Hope this helps,

Rodrigo.