Why can't I click the left side of the link on this CSS flip card in Chrome?

Question

Attempting to click the left side of the link on the back of this flip card does not work in Chrome. Yet, when I mouse over the right side of the link, I see the pointer cursor and am able to interact with it:

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .card-inner .card-face.card-back {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-inner .card-face .card-face-inner .card-face-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.card:hover .card-inner {
  -webkit-transform: rotateY( 180deg);
  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 fix this so the entire link is clickable? I'm guessing this has something to do with backface-visibility. I came across this StackOverflow answer, but I think the solution is already implemented here with the lines:

.card .card-inner {
    ...
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Answer 1

I don't know the reason but this is most likely a bug because it works on Firefox as intended. Adding pointer-events: none; to .card-inner and pointer-events: auto to .card-face works, only god knows why.

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.card {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}

.card .card-inner {
  position: relative;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

.card .card-inner .card-face {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
}

.card .card-inner .card-face.card-back {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}

.card .card-inner .card-face .card-face-inner .card-face-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.card:hover .card-inner {
  -webkit-transform: rotateY( 180deg);
  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>