Flipping the card with transform: translate(100%,0) makes the links not clickable on the card

Issue specifically happens with IOS16.4 and above (both on Chrome and Safari). The same code works across all other browsers and IOS 16.3 and below as well.

Below is the CSS code for the card flip (backside of the card)

-webkit-transform: rotateY(-180deg) translate(100%, 0); transform: rotateY(-180deg) translate(100%, 0);

When the card is flipped, on the backside - no clicks were clickable. translate(100%,0) is the culprit after debugging for many hours. I am not sure what is the alternate solution and/or why this started failing only from iOS16.4 and above.

Any insights to this issue would be highly appreciated as I spent way too much of time troubleshooting this stupid issue.