Animation breaks on iOS Safari; works on Chrome and Firefox

[BrianCross 50 Likes (Contributor)]

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 )

 

 

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

[GreenSock 16,668 Likes (Superhero)]

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: 

• https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari

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.

[BrianCross 50 Likes (Contributor)]

@GreenSock I've got a stripped down pen here that replicates the issue. If you un-comment the three lines that shift the image it breaks the whole thing in iOS Safari.

 

See the Pen 3e0816eea3199e4a6cb25dcb5cb90833 by BrianCross (@BrianCross) on CodePen

[GreenSock 16,668 Likes (Superhero)]

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? 

[GreenSock 16,668 Likes (Superhero)]

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? 

[BrianCross 50 Likes (Contributor)]

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!

[GreenSock 16,668 Likes (Superhero)]

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. 🙄

[BrianCross 50 Likes (Contributor)]

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