Задняя сторона-видимость в Firefox - PullRequest
0 голосов
/ 19 апреля 2020

Я пытаюсь сделать анимацию сальто. У меня проблема в том, что backface-visible у меня работает в Chrome (81.0.4044.113), но не в Firefox (75.0). Я нашел эту проблему в Firefox, но даже преобразование элемента не сработало для меня.

let card = document.querySelector('#card');
card.addEventListener('click', function() {
  if (card.style.transform === "rotateY(180deg)") {
    card.style.transform = "rotateY(0deg)";
  } else {
    card.style.transform = "rotateY(180deg)";
  }
});
#card {
    cursor: pointer;
    -webkit-transform-style: preserve-3d; /* Safari */
    transform-style: preserve-3d;
}

#cardTaskHeader,
#cardSolutionHeader,
#cardTask,
#cardSolution {
    -webkit-backface-visibility: hidden; /* Safari */
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#cardHeader,
#card .card-body {
    position: relative;
}

#cardSolutionHeader,
#cardSolution {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: rotateY(180deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card bg-light" id="card">
  <div id="cardHeader">
    <h2 class="card-header" id="cardTaskHeader">TaskHeader</h2>
    <h2 class="card-header" id="cardSolutionHeader">SolutionHeader</h2>
  </div>
  <div class="card-body">
    <h1 class="card-text" id="cardTask">Task</h1>
    <h1 class="card-text" id="cardSolution">Solution</h1>
  </div>
</div>

Как я могу это исправить?

Я уже пробовал:

  1. Проверено около 15 вопросы здесь и пробовали их решения, в том числе:
  2. Добавление transform: rotateY(0deg) ко всем возможным элементам.
  3. Добавление transform: rotateX(0deg) ко всем возможным элементам.
  4. Добавление transform: translateY(0deg) к все возможные элементы.
  5. Добавление transform: translateX(0deg) ко всем возможным элементам.
  6. Настройка position: absolute на #cardTask и #cardTaskHeader
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...