3d transform on safari and firefox

Hello guys,

I’m working on this for a compagny which sells board games (just a part of the site i’m trying to make work on another project).
If you are on chrome, you should see this when you hover on the CTA

On safari and firefox i have this issue

First i thought it was a Z index issue, i’ve tried everything but it still doesnt work :frowning:
So i though maybe someone could help me here ! :slight_smile:

Here is the share link -> https://preview.webflow.com/preview/leikki-18c188fbbabd97a4a546a52ff503ced9?preview=1563a39f2c90fbb2bb86bf3d0018b71b

Any ideas ?
Thanks a lot

I’ve now removed flexbox, i’ve tried to remove the div background of the cards because i thought it was the problem, i’ve been playing with the Z index etc but no improvement.


It looks like when my animation is starting, it removes the Z value so the card animated are on the top (it concerns only transforms animation, for simple things like opacity everybody stay at his position).

Hi @zbrah, thanks for all the good info. I took a look, and this is what I see at first in Safari:

Then, after changing the overflow style on each “containerquiestce” parent elements to overflow hidden, I get this behavior in safari:

This seems to be a bit different, with the cards going invisible completely. It might be a safari bug too. I am still checking and will let you know if I find something new.

1 Like

Hey Dave :slight_smile:

Thanks a lot i know its a challenge to look a this project :slight_smile:
What you see in Safari is what i see.
What i’m trying to achieve on firefox and safari is this :

This is how it works on chrome and this is how i would like it to work on Safari and Firefox.
I had the overflow idea too, thanks a lot for pointing it but i think i prefer when we see the backface of the cards.

I guess i will only do those interactions on the first line of cards if i can’t find any solution…


Hi @zbrah, yeah, I know what you mean about the backface being visible, I would want it too :slight_smile:

I will keep checking! Sometimes the browser difference issues can be tricky and frustrating. When I have some new info, I will let you know.

1 Like

Yes :frowning:
Thanks a lot @cyberdave thats very kind :slight_smile:
Have a great day

HI @cyberdave didn’t solved the problem, but the site has to be live soon so i just made interactions on the first line of the board.

Still looks fine i guess…
Thanks again for trying to find the solution

Hi @zbrah, thanks, I am working to get the bandwidth to look at this in more detail. :slight_smile:

This is likely due to browser rendering diff, but I have to check further to isolate that. Push it to the limit man! I am going to keep checking on this :slight_smile:

1 Like