Jump to content
Search Community

Safari X and Y positioning bug

eisenheim94 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi. I have trouble with Safari browser positioning of elements with TweenMax x and y.

In all browsers car at this position:

 

hm7jrtX.png

 

But in Safari car at the another position:

 

NTLw5JE.png

 

 

Code:

TweenMax.to("#car", 0.1, {x: 530, y: 262, scale: 0.6, transformOrigin: "50% 50%"});

How to fix it?

Link to comment
Share on other sites

hmm, hard to tell by just seeing that code. It looks fine. 

I'm sure that once you are able to produce a reduced test case that we can test and edit we will be able to diagnose the problem.

I suspect there is some CSS somewhere perhaps that is causing a problem, but impossible to tell.

 

Here are some tips for creating a demo:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Please keep it as as simple as possible so that we can quickly isolate the issue. 

 

Thanks!

Link to comment
Share on other sites

hmm, hard to tell by just seeing that code. It looks fine. 

I'm sure that once you are able to produce a reduced test case that we can test and edit we will be able to diagnose the problem.

I suspect there is some CSS somewhere perhaps that is causing a problem, but impossible to tell.

 

Here are some tips for creating a demo:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Please keep it as as simple as possible so that we can quickly isolate the issue. 

 

Thanks!

 

You can check my test webpage at http://luck.hounddev.com

There's a problem with ship in first scene, with balloon in in 5th and with the car in the last scene.

Link to comment
Share on other sites

Hi, I think you misunderstood my previous post.

Here is a great article describing what a reduced test case is and why it is so necessary:

https://css-tricks.com/reduced-test-cases/

 

Your css file at: 

http://luck.hounddev.com/css/style2.css

has over 2000 lines of code.

I saw a js file with about 1000+ lines of code too.

I wouldn't even know where to begin.

 

I can say with great confidence that TweenMax has no problem setting x and y coordinates (or else this forum would be flooded) 

 

Please try to replicate the problem without bootstrap or scrollmagic and just include the elements that aren't positioned correctly (nothing else).

The good news is there is a team of GSAP experts willing to help you as soon as you have the time to provide a suitable demo.

Thanks for understanding.

  • Like 3
Link to comment
Share on other sites

  • 8 years later...

I know its a looong way into the future on this, but I had a similar issue with items not positioning correctly on Safari.

After some local debugging (as well as a good amount of head-scratching), I realized I had only set the height of the SVG in the CSS. Once I added the width of the element manually into its CSS styles, the offset went away.

Hope this helps - cheers!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...