Overlapping images with animations working in Chrome but not Safari

Hi all,

At the very top of my website I have these green “coins” in a column with a z-index of 100, and in the backdrop I have a red/blue “blur” (image) with a z-index of -100. When you hover over the green coins with your mouse they play a spin animation.

On Chrome, the green coins show ontop of the red blur both before and after hovering over them:

Screen Shot 2022-05-09 at 1.32.05 PM

However, on Safari, before hovering they appear behind the blur:

Screen Shot 2022-05-09 at 1.11.52 PM

And after hovering over some of the coins to make them spin, they come to the foreground:

Screen Shot 2022-05-09 at 1.11.59 PM

I was able to isolate this issue to the mouse hover animation because when I remove the mouse hover animation, the coins all appear in the foreground on Safari. I tried making my own rotation animation instead of using Webflow’s default one, but the same issue arises. Does anyone know how I can fix this?

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

bumping this post, was hidden before