Jump to content


Animated clip-path not rendering correctly 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 am trying to create floating circular image mask using svg clip-path. It works fine in Firefox and Chrome but Safari somehow cuts off the clipped image. Resizing the browser seems to (temporarily) solve the issue.


I have no clue what is going on. Any help would be greatly appreciated!


See the Pen OjvawX by gerben (@gerben) on CodePen

Link to comment
Share on other sites

Yeah, that's unrelated to GSAP - Safari just doesn't render things correctly (Safari bug). Apparently clip-path isn't "officially" supported by Safari, at least according to the info I saw on the web. But the weird rendering behavior got me thinking - maybe if you could force the browser to re-render on each tick/update, it'd work. Sure enough, that seems to help. 


So in your example, you could do something like: 

var img = document.querySelector(".svg-image");
function redrawClipPath() { // <- call this in an onUpdate
    img.style.clipPath = "none";
    img.offsetWidth; //force a style recalculation
    img.style.clipPath = "url(#svgPath)";


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


Does that help at all? 


You might want to add some conditional logic so that it only runs in Safari (strictly for performance reasons). Hopefully this gives you a nudge in the right direction. 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

Fantastic, this works very well! 


Would this solution be very heavy performance wise?


Thanks a lot for the help!

Link to comment
Share on other sites

Yep, anytime you trigger a style recalculation, it can be costly. It all depends on how many other things are flying around on the screen, how big the "dirty" area is,  and how fast the user's processor is, etc. You may not notice a difference. I would suggest running tests of your own.


Happy tweening! 

  • Like 1
Link to comment
Share on other sites

Thanks for the extra info. Hope they take care of this one day...

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.