CSS Flip Card Scroll Issue in Firefox: Scrollbar Appears but doesn't work with mouse wheel

Question

If I made a flip card like the one here flip_card, but and made the front-card and the back-card scrollable then the scrolling via mouse wheel only works with the back-card and the front-card only works if I clicked directly on the scrollbar and move it up or down. This is only happens in firefox.

Here is a modified version of the above flip card that demonstrate the issue clearly:

function rotate() {
  document.getElementsByClassName("flip-card-inner")[0].style.transform = "rotateY(180deg)"
}

function rotateBack() {
  document.getElementsByClassName("flip-card-inner")[0].style.transform = "rotateY(0)"
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<button onclick="rotate()">Flib</button>
<button onclick="rotateBack()">Flib back</button>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

The front-card scrollbar will only work if the back is hidden(display:none). So why this is only happening in firefox? and why I need to hide it since the back-card is already has transform: rotateY(180deg) property?

Thank you.

Answer 1

The problem is that you place two divs on top of each other. So the one with the higher z-index will receive the pointer events. The rotation affects the rendering only and not the actual order in the DOM. You could change their z-index when you flip them or disable the pointer-events on the side that is facing the back.

It is easier if you handle the flip by toggling a class instead of rotating it through the style.

So adding the .flipped class on the card and you can now handle the functionality through CSS with

.flip-card:not(.flipped) .flip-card-back {
  pointer-events: none;
}

.flip-card.flipped .flip-card-front {
  pointer-events: none;
}

So a working example would be something like

function rotate() {
  document.querySelector('.flip-card').classList.toggle('flipped');
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
}

.flip-card:not(.flipped) .flip-card-back {
  pointer-events: none;
}

.flip-card.flipped .flip-card-front {
  pointer-events: none;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>
<button onclick="rotate()">Flip</button>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      <h1>FRONT</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
    <div class="flip-card-back">
      <h1>BACK</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>