0

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;
}
Timothy Fisher
  • 1,001
  • 10
  • 27

2 Answers2

5

The reason is that 180deg is not exactly half a turn due to small precision errors in Chrome.

And the left side of the element is under the front side (even if you can't see it, it's still there).

Raise your element in the Z direction, just a pixel, and it works (now it is fully over the other side):

/* 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 {
  transform: rotateY( 180deg) translateZ(1px);   /* changed */
}

.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>
vals
  • 61,425
  • 11
  • 89
  • 138
  • Thanks for the explanation. I noticed that my original pen didn't work in Safari, somehow the solution that @Taylan provided worked to fix the link issue and make it work in Safari. No idea how, but both of your answers are valuable! – Timothy Fisher Mar 22 '20 at 18:28
  • Happy that it helped ! – vals Mar 23 '20 at 06:35
  • I had this issue on an app since iOS version 16.4. I do not know why. My links under the flip cards worked fine on iOS until the 16.4 update. Adding the translateZ(1px) solved the problem! Many thanks – Petitemo May 04 '23 at 13:38
2

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>
Taylan
  • 3,045
  • 3
  • 28
  • 38
  • Interesting! So, I just realized that my original pen wasn't working in Safari, I was getting a weird flickering effect. Both solutions from you and @vals work, but yours somehow makes it work in Safari too! – Timothy Fisher Mar 22 '20 at 18:26
  • Ended up using a combination of both of your solutions for my actual application. – Timothy Fisher Mar 22 '20 at 18:45