Не удается выбрать входы после TransformY на chrome для эффекта «переворачивания карты»

Question

У меня есть «карточный» дизайн, в котором у меня есть div с двумя детьми, «спереди» и «сзади». Эффект «переворачивания карты» достигается путем применения к карте преобразования rotateY(180deg), скрывающего оборотную сторону.

Я заметил несколько различий между chrome и firefox. На firefox анимация плавная, на chrome есть цвет sh белого цвета. Но самое главное, элемент ввода на «обратной» стороне карты не активируется в Chrome.

Вы можете увидеть эффект в каждом браузере в следующих рисунках:

Любые идеи на что творится?

Код, доступный на этой ручке: https://codepen.io/elbasti/pen/poJjLmP

function flipCard() {
  var element = document.getElementById("flipper-container");
  element.classList.toggle("flipper--flipped");
}

.flipper {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  flex: 0 1 auto;
}

.card {
  height: 200px;
  width: 200px;
  transition: transform 1s;
  transform-style: preserve-3d;
  padding: 0px;
  backface-visibility: hidden;
}

.card__face {
  box-sizing: border-box;
  border-radius: 12px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
}

.card__face--back {
  background-color: #9e0495;
  position: relative;
  height: 100%;
  color: white;
  transform: rotateY(180deg);
}

.card__face--front {
  background: gray;
}

.flipper.flipper--flipped .card {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

<div id="flipper-container" class="flipper">
  <div class="card">
    <div class="card__face card__face--back">
      <p>I am the back</p>
      <input type="text" placeholder="Back input">
      <p>The back one doeesn't work in chrome :(</p>
    </div>

    <div class="card__face card__face--front">
      <p>I am the front</p>
      <input type="text" placeholder="Front input">
      <p>The front input works.</p>
    </div>
  </div>
</div>

<button id="toggle-flip" onclick="flipCard()">Click me</button>

Answer 1

Кажется, что .card перекрывает спину после вращения.

Возможно, вы могли бы вращаться не .card, а .card__face--front и .card__face--back. Я сделал некоторые изменения во фрагменте.

function flipCard() {
  var element = document.getElementById("flipper-container");
  element.classList.toggle("flipper--flipped");
}

.flipper {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  flex: 0 1 auto;
}

.card {
  height: 200px;
  width: 200px;
  transition: transform 1s;
  transform-style: preserve-3d;
  padding: 0px;
  backface-visibility: hidden;
}

.card__face {
  box-sizing: border-box;
  border-radius: 12px;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  backface-visibility: hidden;
}

.card__face--back {
  background-color: #9e0495;
  position: absolute;
  height: 100%;
  color: white;
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

.card__face--front {
  background: gray;
  transition: transform 0.5s;
}

.flipper.flipper--flipped .card__face--front {
  transform: rotateY(-180deg);
  transition: transform 0.5s;
}

.flipper.flipper--flipped .card__face--back {
  transform: rotateY(0deg);
  transition: transform 0.5s;
}

<div id="flipper-container" class="flipper">
  <div class="card">
    <div class="card__face card__face--back">
      <p>I am the back</p>
      <input type="text" placeholder="Back input">
      <p>The back one doeesn't work in chrome :(</p>
    </div>

    <div class="card__face card__face--front">
      <p>I am the front</p>
      <input type="text" placeholder="Front input">
      <p>The front input works.</p>
    </div>
  </div>
</div>

<button id="toggle-flip" onclick="flipCard()">Click me</button>