Issues with 3D transformations in Safari

Hi there,

I’m having some issues with some interactions in Safari (desktop and mobile), Chrome behaves absolutely fine.

I have a Sticky section on my page where a couple of 3D animations are happening. This is what it looks like in Chrome:

And this is what it looks like on Safari:

As you can see, a couple of things are going wrong:

  1. The card and text move through the 3D screen in the background.
  2. The card on the left gets pulled out of proportions.

I had a similar issue with another project and was able to fix it by playing around with the Children Perspective settings and the Z-Axis, but for some reason I’m unsuccessful to fix it in my current case. Any help is hugely appreciated.

Check out the read-only link or the staging version (How it works section).


Here is my public share link: LINK
(how to access public share link)