I have a simple code that I developed, from a card flip effect, example below.
It works on google quiet, but I found that in safari has a bug when the card turns, I researched, I found some prefixes for safari but I can not find a solution, lack any prefix of support for the safari? >
The safari bug is that when the card flips, the background does not appear, just the front.
let card = document.getElementById("card")
let frente = true
card.addEventListener("click", (event) => {
if (frente == true) {
card.style.transform = "rotateY(180deg)"
frente = false
}
else {
card.style.transform = "rotateY(0deg)"
frente = true
}
event.stopPropagation()
})body, .content, html {height: 100%}
* {margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif;}
.content {
align-items: center;
background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
display: flex;
justify-content: center;
perspective: 600;
}
.card {
background-color: #fff;
box-shadow: 0px 2px 10px #444;
height: 480px;
position: relative;
transition: all 0.5s ease-in-out;
transform-style: preserve-3d;
width: 320px;
}
.card .side {
backface-visibility: hidden;
height: 100%;
position: absolute;
overflow: hidden;
cursor: pointer;
}
.card .back {
background-color: #fff;
backface-visibility: hidden;
height: 100%;
position: relative;
transform: rotateY(180deg);
width: 100%;
z-index: 102;
}<div class="content">
<div id="card" class="card">
<div class="side">
side
</div> <!-- .side -->
<div class="back">
back
</div> <!-- .back -->
</div> <!-- .card -->
</div>obs: error only happens on safari.
obs: I have this code in the codepen case please link