J'ai une simple animation de flip de carte qui fonctionne bien sur les navigateurs que j'ai testés.Problème CSS Safari avec animations superposées
Cependant, il y a un problème sur Safari lorsque cette animation par carte se produit au-dessus d'une autre div qui est également animée. Pour une raison quelconque sur Safari quand la carte se retourne, elle disparaît derrière le "background div". Je pensais que c'est peut-être un problème z-index mais de ce que j'ai essayé c'est pas.
Pour rendre l'exemple simple, le fond div est gris. L'idée est d'avoir un effet lumineux en arrière-plan. Ci-dessous l'exemple du code que j'ai, j'ai testé cela sur Chrome, Firefox et Edge ça fonctionne très bien, mais sur Safari quand la carte est retournée, elle disparaît.
$(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>