Streaming live at 10am (PST)

3d transform on safari and firefox


#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


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


#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:

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.


#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 :

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.


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

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:


#9