Проблема CSS Safari с наложенными анимациями

Question

У меня есть простая анимация переворота карт, которая хорошо работает в браузерах, которые я тестировал.

Однако в Safari есть проблема, когда анимация переворачивания карты происходит поверх другого элемента div, который также анимируется. По какой-то причине в Safari, когда карта переворачивается, она как бы исчезает за "фоновым div". Я думал, что, возможно, это z-index вопрос но из того что я пробовал это не так.

Чтобы упростить пример, фон div имеет серый цвет. Идея состоит в том, чтобы иметь светящийся эффект на заднем плане.

Ниже приведен пример кода, который у меня есть, я тестировал его на Chrome, Firefox и Edge, он работает нормально, однако в Safari, когда карта переворачивается, он исчезает.

$(document).ready(function() {
  $('button').click(function() {
    $('.wrapper').toggleClass('flip');
  });
});

.perspective {
  perspective: 1000px;
  margin: 50px;
  position: relative;
  width: 175px;
  height: 250px;
}

.some-bg {
  background-color: #ccc;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  animation: test-bg-animation 1s infinite linear;
}

@keyframes test-bg-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wrapper {
  width: 125px;
  height: 175px;
  border: 1px solid blue;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 250ms;
  top: 35px;
  left: 25px;
}

.wrapper.flip {
  transform: rotateY(180deg);
}

.card-face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
}

.back {
  background-color: tomato;
}

.front {
  background-color: #bada55;
  transform: rotateY(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="perspective">
  <div class="some-bg"></div>
  <div class="wrapper">
    <div class="card-face front">Front</div>
    <div class="card-face back">Back</div>
  </div>
</div>
<button>Flip Me!</button>

Answer 1

Вы можете исправить это, вложив .some-bg и .wrapper div в div с абсолютным позиционированием и относительным родителем.

Посмотрите эту скрипку для примера: https://jsfiddle.net/voLzv68w/