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

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

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

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

карта в хроме карта в Firefox

Есть идеи о том, что происходит?

Код доступен на этой ручке: 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>

Всего 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>


Есть идеи?

10000