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
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).
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.
Thanks a lot i know its a challenge to look a this project
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, thanks, I am working to get the bandwidth to look at this in more detail.
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
