Jump to content
GreenSock

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

Animation breaks on iOS Safari; works on Chrome and Firefox

Go to solution Solved by GreenSock,

Recommended Posts

Hi everyone,

 

The issue here seems to be with the shifting of the background images on slide in / out. In the functions slideIn and slideOut I've commented out the lines of code that shift the background images. With this code removed everything works fine on all browsers. Un-commenting the code adds the image shifting and on Chrome and Firefox, everything works fine with the shifting added. On Safari however, it appears to kill the other tweens that scale the SVG clipping path and do the SplitText animation.

 

Have a look and see what you think. I'm assuming I've made a mistake but then I'd also assume I'd have an issue in other browsers.

 

(Feel free to critique my code as well :wink:)

 

 

See the Pen 6611f2e6f66b474a10ed49b6d75e4b6b by BrianCross (@BrianCross) on CodePen

Link to comment
Share on other sites

Yep, there's a lot going on in that demo but I believe the issue is a bug in Safari and its poor support for CSS clip-path. I'd recommend avoiding clip-path.

 

Here are some related links: 

If you still need some help, it'd be super cool if you could isolate just the part that's problematic (strip out all the SplitText stuff, extra elements, animations, etc.) But again, I'm pretty sure it's Safari's poor support for CSS clip-paths.

  • Like 2
Link to comment
Share on other sites

Thanks for the more minimal demo - it still looks like you're using clip-path: url(#clip-path); which is what I was trying to explain that Safari doesn't support well. You can look in Dev Tools and see that GSAP is animating things exactly as it should, but Safari has rendering issues related to clip-path (poor support). See what I mean? 

Link to comment
Share on other sites

  • Solution

Here's a solution based on that old forums post I linked to above: 

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

 

It uses this helper function: 

function fixClipPath(targets) {
  const agent = navigator.userAgent || "";
  if (~agent.indexOf("Safari") && agent.indexOf("Chrome") < 0) { // only apply the fix if it's Safari (otherwise, save the CPU cycles)
    targets = gsap.utils.toArray(targets);
    const clipPaths = targets.map(el => window.getComputedStyle(el).clipPath),
          func = (el, i) => {
            el.style.clipPath = "none";
            el.offsetWidth; //force a style recalculation
            el.style.clipPath = clipPaths[i];
          };
    return () => targets.forEach(func);
  }
}

So you'd just use it in an onUpdate of your tween/timeline, passing it the elements that have the clip-path like: 

gsap.to(".image", { 
  yPercent: 15, 
  onUpdate: fixClipPath(".wrapper")
});

It automatically senses if it's Safari and only applies the fix in that case (to save CPU cycles in other browsers). 

 

Again, this has nothing to do with GSAP - it's totally a Safari rendering bug. 

 

Does that work well for you? 

  • Like 2
Link to comment
Share on other sites

Hi Jack, very interesting. I read the threads you posted and yeah I get what you're doing. Thanks very much for the assistance; your workaround works perfectly.

 

Strange that Safari doesn't fix bugs like this. 🤷‍♂️

 

Thanks again for your help!

  • Like 1
Link to comment
Share on other sites

34 minutes ago, BrianCross said:

Strange that Safari doesn't fix bugs like this. 🤷‍♂️

 

Yep. Safari is like the new IE :)

 

It has been years since that bug was reported. Still not fixed. 🙄

  • Like 1
Link to comment
Share on other sites

It's so bad, right?? Part of the problem is the clip-path behaviour in Safari will work in certain situations and break in others. Very annoying.

 

I re-created the animation using outer and inner sliding divs, so it doesn't use a clip-path at all and therefore works in Safari. I'll probably implement the final animation this way.

 

See the Pen 32bf98f7eed988d5dfc5b148cf85bacc by BrianCross (@BrianCross) on CodePen

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

×