Jump to content


How can I smoothen rotateY tranform in Safari?

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

I first tried using CSS, but when I was informed that it looks buggy on Safari, I tried with Greensock to see if it fixes it. It still has the same issues, but ONLY on Safari. After a bit of research I saw it discussed on StackOverflow as a Safari bug. 


The bug is: while doing the transition, half of the element seems to transition differently than the other half. It shows a line in the middle, like if the element was made of paper and was bending in half.


Is there any way around it? I presented a few animations to the client, but this animation (rotateY) was the unanimous selection.


Note: I am somewhat new to Javascript and Greensock. You may notice better ways to do what I did. I wouldn't mind suggestions on improving it, but what I am really after is a solution to the bug/glitch.


Thank you for your time.

See the Pen jbQvBy by ricardoh (@ricardoh) on CodePen

Link to comment
Share on other sites

Hello rhormazar,


Try adding transformStyle:"preserve-3d" and backfaceVisibility:"hidden" using the GSAP set() method on for your .iconBG elements.


See the Pen XmyyGR by jonathan (@jonathan) on CodePen

TweenMax.set('.iconBG', {

I tested on a IPAD Air Safari


You can also add perspective like Diaco advised if you need perspective, a good starting transformPerspective value would be 1000px

TweenMax.set('.iconBG', {
      transformPerspective: 1000

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/


You can also add a slight z:0.01 but depends.. i really didn't see that line when rotating on the y-axis on the IPAD Air Safari, like you described above.


See if that helps



  • Like 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.