1
我有一个简单的卡片翻转动画，在我测试的浏览器上运行良好。Safari CSS与叠加动画的问题
然而，当这张卡片翻转动画发生在另一个也是动画的div上时，Safari上还存在一个问题。出于某种原因，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>