3d transform on safari and firefox

Design help General
1

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).
http://leikki-18c188fbbabd97a4a546a52ff503ced9.webflow.io/
If you are on chrome, you should see this when you hover on the CTA

1648×1525 111 KB

On safari and firefox i have this issue
1749×1525 85.8 KB

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

2

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.

EXCEPT

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).

3

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

https://cl.ly/3u0k0j1V0t1i/Screen%20Recording%202016-12-15%20at%2009.53%20PM.gif

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

https://cl.ly/3O0q2L0w0h2c/Screen%20Recording%202016-12-15%20at%2009.58%20PM.gif

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
4

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 :

1055×647 480 KB

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…

:sleepy:

5

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
6

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

7

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.

1514×827 304 KB

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

8

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