GSAP scaling is causing an issue in Safari browsers

[ektorp]

Hi team GSAP - I have a standard Swiper carousel with a simple scaling effect using GSAP. Everything works as expected on all browsers except Safari desktop and mobile. Viewing the Codepen in Safari, you will see that once you click or swipe through the slides, the slide content element flashes in for no reason. This content element abruptly displays when it shouldn't. This is somehow being caused by using GSAP to scale the active slide image. If you view this on any other browser, you will see the expected behavior. I am hoping there is a simple browser work around to get this resolved for Safari. Any help with getting this resolved would be very much appreciated.

See the Pen dyamgrq by bdang (@bdang) on CodePen

[mvaneijgen]

Seems perfect here. I see no difference in macOS Safari version 17.0 and Chrome version 118.0.5993.117. Any specific versions/OS you're looking at?

 

[Rodrigo]

Hi,

 

I just checked the codepen in Chrome and Safari on an iPad and I don't see anything wrong 🤷‍♂️

[GreenSock]

Are you talking about the .slide-content suddenly appearing after the scaling finishes (rather than being there the whole time)? If so, that's not a GSAP problem/bug - that's a Safari rendering issue that can easily be solved by setting will-change: transform on the .slide-content (in CSS). Or you could set a 3D transform of some kind, even transform: translate3d(0px, 0px, 0px); Kinda silly, right? When that image animates, it's getting layerized (which is a good thing - it's being promoted to the GPU for accelerated rendering, good for animation performance) and Safari is goofing up how it's rendering the layers, almost like anything that's being handled by the GPU should sit in front of anything that's not (which is clearly incorrect). The tips I gave you above are just ways to get Safari to treat that other content like it's promoted to the GPU too for faster rendering. This shouldn't be necessary. 100% a Safari bug, not GSAP's fault at all. 

[ektorp]

Thank you for @mvaneijgen and @Rodrigo for your responses.  The issue is viewable on Mac OS Safari Version 17.1  and on mobile Safari as well. To clarify the issue, the scaling of the image itself is not the issue. That is actually working fine. But this image scaling is causing the content element in the slides to hide, show, and flicker when it shouldn't. The video below shows the issue. The content block element should consistently remain in place but it is not, again, only on Safari browsers. 

 

 

 

 

[ektorp]

Thank you so much @GreenSock! That did the trick. And yes, a very annoying Safari bug indeed. Thanks again so much for the quick fix for this. Happy Thanksgiving 2023 to all at team Greensock! Hope it's a great one.