Jump to content


Safari bug - transform 3D inside a slick slider

Recommended Posts

Good day,


Can someone help me solving the issue? Have been looking for multiple solution and i don't want to end up using javascript safari hacks.


My sample pen works in other browsers but safari.


Many thanks in advance.

See the Pen NWWXmVj by Ralphralph (@Ralphralph) on CodePen

Edited by Ralph
Link to comment
Share on other sites

This isn't really a GSAP-related question, but I think the issue is just that Safari renders stacking order of 3D things in a VERY different way than other browsers - the z-dimension can slice right through objects. In other words, imagine 2 pieces of paper flat against each other, and then taking the top piece and rotating it toward you (from its center) - half of it would be behind the other piece of paper, and half would be in front according to Safari. 


Try just setting the "z" position to something bigger to lift it off (like putting the top piece of paper a few feet off the table where the other paper is - now you can rotate it and it doesn't cut into the other piece). 


Happy tweening!

  • Like 2
Link to comment
Share on other sites

Thank you very much for your detailed input! I got it working by setting the "z" value to 1000.


TweenLite.to(box, 1, {
	rotationY: xPos * data_xPos,
	rotationX: yPos * data_yPos,
	z: 1000,


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.