This specific card clip HTML component is designed with only HTML and CSS, which performs well except on IE11. In IE11, there is a noticeable slowdown and lag. Interestingly, when I remove the backface-visibility:hidden property, the component functions perfectly in IE11. However, this property is essential for the desired effect.
What potential solutions or workarounds could address this issue?
Visit this link to view the code example
<div class="card">
<div class="card__side card__side--front">
</div>
<div class="card__side card__side--back ">
</div>
</div>
CSS
.card {
width: 200px;
perspective: 150rem;
-moz-perspective: 150rem;
position: relative;
height: 52rem;
}
.card__side {
border-radius: 3px;
overflow: hidden;
background: #808080;
height: 50rem;
width: 100%;
transition: all 800ms ease;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
}
.card__side--front {
background: red;
z-index: 1;
}
.card__side--back {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.card:hover .card__side--front {
transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
.card:hover .card__side--back {
transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
html {
font-size: 5px;
}