Overlapping images with animations working in Chrome but not Safari

Hi all,

My site has two overlapping images at the very top. In the foreground there are these green “coins” with z-index 100 and when you hover over them with mouse, they flip left to right (webflow default animation). In the background there is a red “blur” image with z-index -100.

On Chrome, the coins properly appear in front of the blur, both before and after the mouse hover animation:

Screen Shot 2022-05-09 at 1.32.05 PM

On Safari, before the mouse hover animation all of the coins are behind the blur:

Screen Shot 2022-05-09 at 1.11.52 PM

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

Screen Shot 2022-05-09 at 1.11.59 PM

Is there any way to fix this animation for Safari? I tried other webflow default animations for the coins (like “bounce” on hover) and there is no foreground/background issue. Does anyone have a solution?

Thanks!


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

Bumping this! Thanks