Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Catalin R.

clipPath doesn't work on IOS

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 post
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 post
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 post
Share on other sites

Hi PointC,

I've eliminated al css and js files.

https://devsaver.com/test2.htm

I have the same bug!

I've copied the SVG element from your codepen and put it inside my html. I have the same issue. Has CodePen something which fixes svg elements?

Edited by DevSaver
Link to post
Share on other sites

o.k. - I managed to break it in CodePen. If you remove or comment out this line in iOS, the clip-path works correctly.

 

<base href="https://devsaver.com/">

 

I'm not sure why, but that is the problem child. Try it for yourself here.

 

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

 

  • Like 5
Link to post
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 post
Share on other sites

I'm glad you have a solution and it's working for you now. Happy tweening.

:)

 

  • Like 2
Link to post
Share on other sites

Great job, Craig!

  • Like 1
Link to post
Share on other sites

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 post
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 post
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 post
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 1
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×