Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Share this post

Link to post
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

Share this post

Link to post
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,


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.