Safari Clip-path not working during/after GSAP Flip animation

[jramke]

Hey,

 

i created a Gallery with a lightbox. Each image has a clippath wich is animated with gsap on mousemove or on the open/close transitions to get some sort of lerp movement effect.
To animate the position change of the images from grid to lightbox i used gsap.Flip animations. 

 

In chrome everything works fine but in safari the image is not visible when transitioning into the lightbox.

On my live site the image then is visible after the Flip animation which is not the case in the codepen.

 

I think this isnt directly related to GSAP and more likely because of the clip-path implementation from safari.

I already tried some things i read here in the forum like will-change: transform; , translate: transformZ(0); , adding a rect to the svg element or forcing the browser to rerender the element with setting the clippath during the onUpdate function, but i couldnt make it work.

 

Thanks for your time and help.

See the Pen gOQWaGM?editors=0100 by jramke (@jramke) on CodePen

[Rodrigo]

Hi,

 

I can see the issue in Chrome and Safari on an iOS 16 device.

 

Unfortunately your example is far from being minimal and we don't have the time resources to go through complex codebases trying to figure what the problem is and where it could be.

 

This is a gross oversimplification that is working as expected on my device:

See the Pen yLGORYN by GreenSock (@GreenSock) on CodePen

 

So there has to be something else that is causing this. As I mentioned we don't have time to go through all your code and follow which part is doing what. If possible remove everything from your code (HTML/CSS/JS) that is not Flip related. Just create the simplest iteration that only uses Flip and nothing else.

 

Hopefully this helps.

Happy Tweening!

[jramke]

Hey thanks for your answer.
Yes that was a lot of code, my bad.

 

I simplified my codepen from above and i also forked your codepen and added the clippath to the image.

See the Pen poqbzMR?editors=0110 by jramke (@jramke) on CodePen

In both demos the image again dissapears during the flip animation in safari 16.6 and Chrome 116 works fine.

I also tried the things mentioned in this thread on the forked pen but nothing seems to work.

 

[Rodrigo]

Hi,

 

So I took this to the top floor and the discovery is that is not a GSAP related issue. The problem lies in the fact that as soon as you add anything that creates a new stacking context such as a 3D transform or will-change: transform, Safari and Chrome (on the iOS devices we tested) don't render that anymore.

 

Check this example:

See the Pen mdaErQq by GreenSock (@GreenSock) on CodePen

 

As you can see there is absolutely no GSAP (or any other JS) code in it. In fact we're not even loading GSAP and/or any other GSAP Plugin. If you check the debug version (no iframes) on iOS Chrome and Safari, there is no image:

https://cdpn.io/pen/debug/mdaErQq

 

But as soon as you comment out the will-change: transform in line 11 of the CSS tag the image is rendered. Unfortunately we can't think of a way to force iOS browsers to render the image in these cases. If you find one we're all ears as we're constantly trying to solve this issues.

 

For now the solution would be to use a simplified approach (as the one in my previous post) for iOS devices and maybe devices in general. Sorry to be the bearer of this news.

 

Good luck with your project!

Happy Tweening!

[GreenSock]

You could toss it into a wrapper <div> that you do the animation on instead, sorta like: 

See the Pen MWZeoQr by GreenSock (@GreenSock) on CodePen

 

That seems to work around Safari's rendering bug with the <img> 🤷‍♂️

[jramke]

Sorry for late reply,

but this simple wrapper change really made it work, thanks so much!!!