search

greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.83k stars 1.72k forks source link

chrome can not get initial absolute top value. #20

Closed ghost closed 8 years ago

ghost commented 11 years ago

my chrome version is 31. some other versions also has the same issue. If one element is absolute, and it's parent's style is not set height property, its top value will be not correct in chrome in computedstyle. http://codepen.io/acroidea/pen/jLIdh the button element's computedstyle is related to window height not its parent. tweenlite can not get the right initial absolute from computedstyle.

jackdoyle commented 11 years ago

Are you saying that you think this is an issue with GSAP or are you just telling us about a bug in Chrome (the browser itself)?

ghost commented 11 years ago

because of chrome bug, TweenLite can not work correct, I'm not sure is the a way to fix this bug in TweenLite.

jackdoyle commented 11 years ago

Would you mind providing a codepen that demonstrates the simplest case where TweenLite doesn't work properly due to the Chrome bug? (Your previous codepen didn't use TweenLite at all)

ghost commented 11 years ago

http://codepen.io/acroidea/pen/gxFom after click move button, the block is not move from current place in chrome, but firefox is ok. I have tested on Chrome, Version 31.0.1650.4 dev-m. I'm must sure chrome 20 also have the same issue. my os is windows 8.1.

JonDum commented 11 years ago

Tested pen/gxFom on Chrome 29. Looked to be working fine and as expected. The first pen didn't work because TweenLite wasn't loaded.

ghost commented 11 years ago

http://codepen.io/acroidea/pen/wxvub http://youtu.be/kkl1gmlEdmk I have put a video on youtube. in chrome, the animation is not start from block's current position, but from about 40% of current window. firefox is ok.

JonDum commented 11 years ago

You are tweening a floating element's top value in a container without an explicit height. The only height it's getting is from a sibling. I don't think the DOM spec is even defined for this situation so I'm not surprised browsers handle it differently. Add an explicit height to the container of the element you are tweening and the percentage-based animations should work fine.

@jackdoyle I did notice that gsap started tweening from a much earlier position (top: 15% instead of top: 40%). It looks like it's trying to calculate where it should start off the percentage and tween from there. Maybe in cases like this it should look to see if there is a getComputedStyle declaration for the tweened value and use that as a starting point? Could be terribly wrong here.

jackdoyle commented 8 years ago

I'm pretty sure this is working as expected. I checked it in several browsers today and I didn't see any jump. Let me know if I'm missing anything.