Jump to content
Search Community

clipPath doesn't work on IOS

Catalin R. test
Moderator Tag

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

You're talking about those same three logos with the glasses? I'm not sure what's happening on your actual website, but on Chrome the glasses animation is already complete by the time I scroll down to them. I'm not sure about iOS specific problems, but clip-path should work. I pulled one of your logos off the site and dropped it into a CodePen. This seems to work fine in all browsers/OS for me. Maybe others see something different?

 

See the Pen pVaGRP by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

hmmmm... I do see that on iOS in your new link, but here is the exact same SVG in a CodePen. ( I pulled it straight from your site)

 

See the Pen xjYePr by PointC (@PointC) on CodePen

 

In my demo, the clip-path seems to be working correctly and looks fine to me in iOS. The only difference is that the demo SVG isn't being influenced by any parent and/or CSS from the main site. There has to be something interfering somewhere that iOS doesn't like. It's a bit cumbersome to debug a live site though. Maybe try turning off the style-sheet or temporarily move the SVG out of its parent containers to see if that makes a difference. 
  • Like 2
Link to comment
Share on other sites

o.k. - I see that it's not working on the site, but again if I move all the HTML to CodePen, it's fine. Strange...

 

Can you turn off or delete all the scripts on that test page? Let's not worry about the tween right now. I just want to see if iOS will recognize that clip-path on your actual site. 

Link to comment
Share on other sites

Hi, 

 

Seems we got to the bottom of this thanks a lot guys!

 

Instead of removing the <base href="" ( not quite possible without a lot of pain for the rest of the site ) we changed the clip path:

 

<g class="clipPathReveal3" clip-path="url(#theClipPath3)">

changed to 

<g class="clipPathReveal3" clip-path="url('/php-web-content-management-system/#theClipPath3')">

 

Cheers!

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Re-hashing this old thread.

 

 

gsap in fact does not appear to correctly animate clip-path on ios

 

You can see this, for comparison, from the following codepen examples:

 

This version is done using CSS and the -webkit prefixes. I works correctly on iOS

See the Pen oNgrMMW by adamcoulombe (@adamcoulombe) on CodePen

 

This version is done using CSS, without -webkit prefixes. It does not work correctly on iOS

See the Pen BaygPev by adamcoulombe (@adamcoulombe) on CodePen

 

This version uses GSAP 3 to animate the clipPath. It does not work correctly on iOS

See the Pen oNgrMMW by adamcoulombe (@adamcoulombe) on CodePen

Link to comment
Share on other sites

Following up on my last post, I have found I can get this to work with gsap if you manually update the vendor prefix property in an onUpdate function. 

 

With GSAP, using onUpdate to set the  -webkit-clip-path working on iOS:

See the Pen bGNPxzE by adamcoulombe (@adamcoulombe) on CodePen

 

So the question is; is gsap's clipPath property supposed to support iOS?

Link to comment
Share on other sites

Sorry for the delayed response, @Adam _25607. Here's what I discovered: 

  • Safari has several bugs impacting this. 
  • It reports that "clipPath" is indeed a valid property that exists in the element's "style" object (thus GSAP assumes it's safe to set it)
  • It incorrectly reports the value of clipPath; even though you set it in your CSS, Safari reports it as "none"! 
  • It works correctly (as you discovered) with the prefixed version, WebkitClipPath. 

So this is definitely a Safari bug/inconsistency, not a problem with GSAP. But we really try to find ways to work around browser bugs/inconsistencies whenever possible so...

 

In the upcoming release of GSAP, I put some code in place to sense this condition and automatically switch to using WebkitClipPath in that case. It seems to work well for me thus far. Would you kick the tires a bit and see if it works well for you? Here's the preview of the upcoming release: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

  • Like 1
Link to comment
Share on other sites

FYI, here are some issues/solutions I've documented when working with SVGs:

  • SAFARI requires SVGImageElement width & height to be inlined or image will not show.
  • Mobile Safari looks for clip-path url based on base href in head tag, so url(#clip-path) will not work.  
        Fix is to dynamically add widow.location.href to url: 'url(' + window.location.href + '#clip-path)'
  • Some versions of EDGE (16 for sure) don't allow CSS transform to be used on some svg elements (SVGImageElement for sure).  
        Inlined x & y should be used instead & dynamically updated if needed.  
        This also helps w EDGE versions that do allow CSS transform on svg elements but don't seem to update visually even though the css selector has changed.
  • 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.
×
×
  • Create New...