Jump to content
GreenSock

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

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

Share this post


Link to post
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 939c08e57bdbf894ab5ce4cd50e20f77 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 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Fantastic, this works very well! 

 

Would this solution be very heavy performance wise?

 

Thanks a lot for the help!

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×