Encountering an issue on iOS devices While implementing a rotating card using the code below, everything works smoothly on various devices except for Safari browser. There seems to be a problem with both the icon and the card itself. The complication arises when I set the transform style as 'preserve-3d', causing issues with the icon. However, I prefer it to remain in 2D. Why does this occur specifically in Safari browser and how can I rectify it? Your assistance is much appreciated.
document.querySelector(".card").addEventListener("click", function() {
this.classList.toggle("clicked");
});.card {
height: 500px;
width: 300px;
position: relative;
background-color: antiquewhite;
transform-style: flat;
}
.panel {
position: absolute;
top: 50%;
left: 50%;
backface-visibility: hidden;
width: 80%;
height: 80%;
transform: translate(-50%, -50%);
transition: transform 1s;
}
.back {
transform: translate(-50%, -50%) rotateY(180deg);
background-color: purple;
}
.front {
background-color: yellowgreen;
}
.card.clicked .front {
transform: translate(-50%, -50%) rotateY(-180deg);
}
.card.clicked .back {
transform: translate(-50%, -50%) rotate(0);
}
.icon {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: olive;
border-radius: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}<div class="card">
<div class="front panel"></div>
<div class="back panel"></div>
<div class="icon">CLICK</div>
</div>