Jump to content


New Safari Bug

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

Hi Folks,


When GreenSock write matrix3d on CSS Transform based on force3D / Perspective / TransformOrigin  the clip-path css attribute animation just break in  the Latest Safari (12.1 (14607.


See our Example above in SAFARI Latest Version, or on any iOS  latest version !! . 


Click on Working and Not Working version to see the Effect.  The only Different between those functions are the "force3d:true" setting !


Hope you have a good idea for this ? 


Thank you,


Krisztian from ThemePunch

See the Pen YMNzLL by themepunch (@themepunch) on CodePen

Link to comment
Share on other sites



Can you be more specific on what is the behavior you see when it breaks in Safari?


Also keep in mind that CSS clip-path still shows partial support  with prefix -webkit for Chrome and Safari




Any Additional info will be appreciated :)

  • Like 4
Link to comment
Share on other sites

3 hours ago, Jonathan said:

Also keep in mind that CSS clip-path still shows partial support  with prefix -webkit for Chrome and Safari



And it's also worth noting that iE11 doesn't support it and Edge support is only partial, so depending on your needs it may not be a good option at this time.

  • Like 1
Link to comment
Share on other sites

Yep, here's proof that it's a Safari bug that's totally unrelated to GSAP: 

See the Pen f71dd9859235aaf4ade113e9ab4cbf8d by GreenSock (@GreenSock) on CodePen


There are actually TWO bugs in Safari 12.1. First, when a 3D transform is applied to an element, it seems to rasterize it in place and then any changes to -webkit-clip-path won't actually render (even though they're being made properly in the JS level and you can even see it in Dev Tools). So that's a rendering issue. It seems like you can FORCE it to render by simultaneously changing another property like background-color.


Second, Safari is reporting that it recognizes a regular "clip-path" style value (because if you check it in the style object, it is NOT undefined), indicating that the "-webkit-" prefix isn't needed...but then when you try to set that clip-path value it doesn't actually get recognized by the browser! Here's proof: 

See the Pen 4ec363d7fca960b501b390634fdf2e39?editors=0010 by GreenSock (@GreenSock) on CodePen


Unfortunately, there just seem to be a lot of problems with clip-path across browsers so I'm reluctant to recommend it. 

  • Like 4
Link to comment
Share on other sites

Thank you for all Your Feedbacks.  Yes, I also reported the issue yesterday  to webkit Bugzilla and they acknowledge it as a bug. 


However i found a solution (i have better read your answer Jack :)  earlier, than i could save some time)  which force redrawing  the content in Safari.  I used the  z transform and/or rotationZ in my case, but just like you sad a background-color or any other not used attribute on that element would help here. 


So i am good for now with this small change.


The Problem with IE is still existing, i do agree with you Visual-Q ! For that i have some other plan :)


Thank you again ! As always , you Rock Guys ! And i just can not imagine living without your Fantastic Greensock Plugin ! 





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