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:
On Safari, before the mouse hover animation all of the coins are behind the blur:
And after hovering over some of the coins, they come to foreground:
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?