Animations break layer order in Safari bug

Design help General
1

When I open my site in Safari the mouse over animation overrides the layer order and lets the background go through the foreground layer. I tested it on Firefox and chrome is it works fine there.

I have two animations on the background, one that increases scale on mouse hover and one that does a 3d effect with mouse move over element. I tried removing them one and a time and the issue persists so it is not a conflict with them. I also have some custom javascript that is active on mobile which I tried removing as well to no avail.

Untitled
Untitled1440×873 109 KB

Here is my site Read-Only link: https://preview.webflow.com/preview/aaronrudyk?preview=17afa220643194a1adca8a94f04e24e9

Here is my live link: http://aaronrudyk.webflow.io/

2

Safari is the new IE7.

You can fix it by doing a transform forward 50px on the z-axis and a .9 scale transform.

2 Likes
3

Sir you are a gentlemen and a scholar. Thanks!

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.