I have a simple card flip animation which works well on the browsers I've tested.
However there is an issue on Safari when this card flip animation happens on top of another div which is also being animated. For some reason on Safari when the card flips it kind of disappears behind the "background div". I thought that maybe it's a z-index issue but from what I tried it is not.
To make the example simple the background div is grey. The idea is to have a glowing effect in the background.
Below is the example of the code that I have, I've tested this on Chrome, Firefox and Edge it's working fine, however on Safari when the card is flipped it disappears.
$(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>
