Flipcard -webkit-backface-visibility: скрытый; скрывает только один элемент на панели, но не другой, а только в Safari

Question

Я работаю над проектом, в котором я добавляю флипкарту на веб-страницу. У меня ушло навсегда, чтобы заставить его работать во всех браузерах, включая Safari. Я сейчас очень близко, но столкнулся с загадкой. На лицевой стороне флипкарты есть текст и изображение. Когда я переворачиваю карту на обратную сторону, я использую backface-visibility: hidden ;. При переворачивании на задний план текст спереди заменяется текстом на обороте, но изображение теперь находится на оборотной стороне, но переворачивается снизу вверх и переворачивается в направлении. Флипкарта отлично работает в Firefox, chrome, edge и opera, но не отображается должным образом в Safari. Кто-нибудь сталкивался с этим раньше?

Вот код:

<div class="rotate-container-outer">
    <div class="container">
        <div class="card">
            <div class="front">
                <p class="CardTextFront">What is organizational culture?</p>
                <img class="click floater" src="images/click.png" alt="Pic of Finger Clicking">
            </div>
            <div class="back">
                <p class="CardTextBack">The personality of an organization. It refers to the value, 
systems, attitudes, customs and habits that drive behaviours. Organizational Culture determines how 
people interact and work.</p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="card">
            <div class="front">
                <p class="CardTextFront">What is employee engagement?</p>
                <img class="click floater" src="images/click.png" alt="Pic of Finger Clicking">
            </div>
            <div class="back">
                <p class="CardTextBack">The degree to which an employee is passionate about the 
success of their work, their team and their organization. Employee engagement determines the effort 
and commitment of an employee.</p>
            </div>
        </div>
    </div>
</div>

CSS:

.rotate-container-outer {
  border: solid 3px orange;
  background: #999;
  display: flex;
  justify-content: space-around;
}
.container {
  margin: 10% auto;
  padding: 0;
  width: 450px;
  height: 400px;
  position: relative;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: -webkit-transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -ms-transition: -webkit-transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -o-transition: -webkit-transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  -webkit-transition: -webkit-transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  transition: -webkit-transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  transition: transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  transition: transform 1.35s cubic-bezier(0.175, 0.885, 0.32, 1.1), -webkit-transform 1.35s cubic- 
  bezier(0.175, 0.885, 0.32, 1.1);
  border-radius: 15px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
.card div {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 15px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-family: Poppins, sans-serif, Trebuchet MS;
  -webkit-font-smoothing: antialiased;
  color: #47525d;
  box-shadow: 0 0 0 5px hotpink;
}
.card .front {
  background: rgb(11, 9, 50);
  display: flex;
  flex-direction: column;
}
.card .back {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
  background: #222;
  color: white;
  letter-spacing: 2px;
}
.flipped {
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.CardTextFront {
  font-size: 26px;
  color: white;
  text-align: center;
  letter-spacing: 2px;
  padding-left: 5%;
  padding-right: 5%;
}
.click {
  width: 40px;
  padding-top: 25%;
}
.CardTextBack {
  font-size: 26px;
  text-align: center;
  padding: 15% 2.5% 15% 2.5%;
}

js

$('document').ready(function() {
  $('.card').on('click', function(e) {
    $(e.target).closest('.card').toggleClass('flipped');
  });
});

Он также использует jquery - jquery -2.3.1. js

Вот ссылка на образец страницы, которую я создал: www.anthonymedicomusic.com/TestSite/sample10.html

Любой кто-нибудь зажечь может пролить на это очень ценится.