Ralph Posted November 3, 2019 Share Posted November 3, 2019 (edited) 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 November 3, 2019 by Ralph typo Link to comment Share on other sites More sharing options...
GreenSock Posted November 4, 2019 Share Posted November 4, 2019 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! 2 Link to comment Share on other sites More sharing options...
Ralph Posted November 4, 2019 Author Share Posted November 4, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now