I've been working on creating a rotating card animation, but I've run into a glitch that's causing the front side to be visible through the back. This issue seems to occur when using position: absolute elements inside one of the sides. While it's somewhat manageable in Chrome, Safari makes it difficult to get my design working without this bug. Below is some code that's glitching on both browsers, and I'm looking for advice on how to resolve this issue.
var isLeft = true;
var x = document.getElementById("card");
setInterval(function() {
if (isLeft) {
x.style.transform = 'rotateY(360deg)';
}
else {
x.style.transform = 'rotateY(0deg)';
}
isLeft = !isLeft;
},5000);.scene {
width:480px;
height:480px;
perspective: 35em;
position: absolute;
left: 100px;
top: 100px;
}
.card {
width:220px;
height:380px;
left: 130px;
top: 50px;
position:absolute;
transition: transform 4s;
transform-style: preserve-3d;
}
.face {
border-radius: 10px;
width:100%;
height:100%;
color:#FFF;
/* line-height:15em;
text-align:center;*/
position:absolute;
backface-visibility:hidden;
-webkit-backface-visibility: hidden;
}
.front {
position:absolute;
background-color:white;
/*border: 1px solid black;*/
}
.back {
position:absolute;
background-color:white;
transform: rotateY(180deg);
overflow: hidden;
/*border: 1px solid black;*/
}<div class="scene" id="scene">
<div class="card" id="card">
<div class="face front">
<div style="width: 100%; height: 100%; background-color: purple; position: absolute;"></div>
<div style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>
<div style="width: 100px; height: 100px; bottom: 0px; right: 0px; background-color: green; position: absolute;"></div>
<div style="width: 30px; height: 30px; background-color: blue; position: absolute;"></div>
</div>
<div class="face back">
<div style="width: 100%; height: 100%; position: absolute; color: white;">
</div>
</div>
</div>