Goodday and thanks in advance for the help,
I’ve run into a problem with a flip card animation on my portfolio page. The page has a grid of tiles that flip on click to reveal content on the back side. I animated the card by flipping a wrapper with the front and the back of the card on the Y-axis. Everything works perfectly in Firefox, but in Chrome I can’t interact with anything on the back of the card after it flips, as if something invisible is intercepting the clicks.
When I set the front of the card to ‘Display: None’ and turn off the Y-rotation for the back of the card so it’s visible, I can interact with it normally. So I tried adding ‘Hide/show’ on the front-card during the flip, but that doesn’t change the outcome. I also isolated the card on a separate page to rule out any external factors, but the issue still persists in Chrome.
I’m really at a loss, and would gladly take any advice on how to fix this!
I was testing your published site and it seems it still has the front card display set to none, so could not test it on Firefox / Chrome. That being said, here’s a free cloneable that you can take inspiration from to structure your front and back card flip animation.
Hope this helps.
If you still face any issues after making changes to the interaction and the styling settings of the cards, you can publish the site, so that I can help in troubleshooting with the updated changes.
Thank you for the response. You’re correct, the front card display was still set to none, I made it visible again, my apologies. I compared the flip animation you linked, and it appears to be very similar to how I set up my flip animation. I don’t see any differences that could influence the interactivity of the back of the card. I hope you could take another look at it and figure out what seems to be the problem when opening the card in Chrome or browsers other than Firefox.
Here’s a new updated version. For some reason, the carousel and lightbox stop working in the sandbox version, but it does work in the published version (only on Firefox though) so I’m not going to worry about that for now.
