CSS - Element visible on backface after flip - css

Question

I'm working on a CSS flip card and ran into this issue, when despite backface-visibility: hidden; an element still visible from the other side.
If you run the (simplified here) snippet and click more in the bottom right corner - the card flips, but the more stays visible. It's probably because of the position: absolute, because the other element behaves as expected.
So my question - is it possible to fix that (preferably with CSS only) and still have the background semi-transparent?
document.querySelector('.card').addEventListener('click', function(e) {
if (e.target.nodeName !== 'I') return;
e.target.parentNode.parentNode.classList.toggle('flip');
});
html, body {
height: 100%;
background: linear-gradient(90deg, #9EFFBE 0, #F4FFC7 45%, #F4FFC7 55%, #ADFCFF 100%);
}
.logo {
background: yellow;
border: 8px solid #fff;
border-radius: 50%;
display: block;
height: 120px;
margin: 1em auto;
width: 120px;
}
.item {
border: 1px solid transparent;
display: flex;
height: 170px;
margin: 0 auto .75em;
perspective: 800px;
position: relative;
width: 40%;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card i {
cursor: pointer;
display: inline-block;
position: absolute;
right: .5em;
bottom: .5em;
}
.card.flip {
transform: rotateY(180deg);
}
.card--front {
background: rgba(255, 255, 255, 0.33);
border: 1px solid #fff;
position: relative;
}
.card--back {
background: #D9FAEF;
background: rgba(255, 255, 255, 0.33);
text-align: center;
position: relative;
transform: rotateY(180deg);
}
<article class="item">
<div class="card">
<figure class="card--front">
<div class="logo"></div>
<i class="icon icon--info-circled">more</i>
</figure>
<figure class="card--back">
<i class="icon icon--cancel-circled">close</i>
</figure>
</div>
</article>

Answer 1

EDIT
.card.flip .card--front {
transition-delay: 0.3s;
visibility: hidden;
}