Задняя сторона не видна при переворачивании карты в Safari

Question

Я попытался создать серию карточных сальто. Сама карта переворачивается во всех браузерах. Тем не менее, в Safari, задняя сторона не видна при переворачивании, и вы ничего не видите?

Кроме того, еще одна проблема заключается в том, что карта в Chrome впервые переворачивается, только до тех пор, пока карта полностью не перевернута, когда отображается задняя сторона и переход отсутствует. Но это только на первом запуске?

// HTML

       <div class="back0" id="homepageImage8">
           <div class="graph" id="graphID8">
               <img src="assets/graphdata/graph-09.png">
           </div>
       </div>
    //jS

//card0

.card0 {
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    background-color: black !important;
    cursor: pointer;
    display: block;
    position: absolute;
}

//card0 div

.card0 div {
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}

//back0

.card0 .back0 {
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    display: block;
    position: absolute;
}

//flipped

.card0.flipped {
    transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    display: block;
    position: absolute;
}