y percent render differently in different browser

[agoago]

Here is a video of ypercent animation in chrome

 

 

 

Here is a video of ypercent animation in safari

 

 

 

You can see in chrome it works perfectly. In safari, the button move down a bit after it finishes it's animation

 

The animation proptery used in this is bottom and ypercent.

[GreenSock]

I'd love to help, but it's rather difficult without a reduced test case. Can you provide a simple codepen (or jsfiddle) that demonstrates the issue so that we can poke around and see what's happening? 

[agoago]

I uploaded the demo to www.udopy.com .  Would that be good enough to play with? If not, I will  try to made the codepen

[Carl]

Unfortunately, it isn't very practical for us to dig through a live site trying to find the js and css responsible for the problem.

 

CodePen or jsfiddle are much better as we can actually edit the code and test our theories.

 

Please provide a basic CodePen with just enough JS, HTML and CSS to illustrate the problem. We don't need to see things in the context of a fully interactive demo as there will likely be tons of code not related at all to the problem that we will need to sift through. 

 

The simpler your demo the better. From your description it should be as simple as a single tween.

 

Thanks!

[Carl]

i went ahead and copied the css from your site and a few divs that had inline styles applied via GSAP and pasted them into a CodePen:

 

See the Pen eWLgGE by GreenSock (@GreenSock) on CodePen

Open that in Chrome and Safari and you will see there is a variance in the vertical placement.

 

As you can see, identical code is rendering differently in different browsers. GSAP will only animate the values you tell it to, it can't control how the browser will interpret those values.  It might be worthwhile to take some time and figure out the css end values that render consistently cross-browser and then plug those into your animation code.

 

[agoago]

Thanks Carl, I think I know how to fix this. That is to change my animation strategy.