Safari bug - transform 3D inside a slick slider

[Ralph]

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

[GreenSock]

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!

[Ralph]

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,
});