When attempting to click the left side of the link on the back of this flip card in Chrome, it does not respond. However, hovering over the right side allows interaction with the link:
/* Vendor prefixed by https://autoprefixer.github.io */
.card {
-webkit-perspective: 1000px;
perspective: 1000px;
display: inline-block;
}
.card .card-inner {
position: relative;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
transform-style: preserve-3d;
will-change: transform;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card .card-back {
background: steelblue;
}<div class="card">
<div class="card-inner>
<img src="https://via.placeholder.com/400x500?text=%20" alt="" />
<div class="card-face card-front">
<div class="card-face-inner">
<div class="card-face-content">
Front
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-face-inner">
<div class="card-face-content">
<a href="#foo">Back</a>
</div>
</div>
</div>
</div>
</div>How can I ensure the entire link is clickable? It seems like the issue might be related to backface-visibility. While researching, I found a similar question on StackOverflow (link here), but based on my code snippet, it looks like the solution is already implemented with these lines:
.card .card-inner {
...
transform-style: preserve-3d;
}