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:
However, on Safari, before hovering they appear behind the blur:
And after hovering over some of the coins to make them spin, they come to the foreground:
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?