backface-visibility is working only partly - html

Question

I'm trying to make a card that flipping on hover. To hide the back part of a card I use backface-visibility: hidden. But it only hides background of the back part while all the elements are still visible on the front side in rotated variant.
I use Google Chrome.
Here's my html code
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--1"></div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--1">
The sea explorer
</span>
</div>
<div class="card__details">
<ul class="card__list">
<li class="card__item">3 day tour</li>
<li class="card__item">Up to 30 people</li>
<li class="card__item">2 tour guides</li>
<li class="card__item">Sleep in cozy hotels</li>
<li class="card__item">Difficulty: easy</li>
</ul>
</div>
</div>
<div class="card__side card__side--back card__side--back-1">
<div class="card__cta">
<div class="card__price-box">
<p class="card__price--only">Only</p>
<p class="card__price--value">$297</p>
</div>
Book now
</div>
</div>
</div>
And here's my SASS code
.card {
position: relative;
height: 52rem;
perspective: 150rem;
&__side {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 52rem;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
transform-style: preserve-3d;
backface-visibility: hidden;
transition: all .8s ease;
&--front {
background-color: $color-white;
}
&--back {
transform: rotateY(180deg);
&-1 {
background-image:
linear-gradient(to right bottom,$color-secondary-light,$color-secondary-dark);
}
&-2 {}
&-3 {}
}
}
&:hover &__side--front {
transform: rotateY(-180deg);
}
&:hover &__side--back {
transform: rotateY(0);
}
// Front side styles
&__picture {
&--1 {}
&--2 {}
&--3 {}
}
&__heading {
}
&__heading-span {
&--1 {}
&--2 {}
&--3 {}
}
&__details {
}
&__list {
width: 80%;
margin: 0 auto;
list-style-type: none;
}
&__item {
&:not(:last-child) {
border-bottom: 1px solid $color-gray-light-2;
}
}
//Back side styles
&__cta {
#include absoluteCenter();
width: 90%;
text-align: center;
}
&__price-box {
margin-bottom: 6rem;
color: $color-black;
text-align: center;
}
&__price--only {
font-size: 1.4rem;
text-transform: uppercase;
}
&__price--value {
font-size: 6rem;
font-weight: 300;
}
}
And this is how the problem actually looks like in Chrome.

Answer 1

Adding transform-style: preserve-3d to .card instead of .card__side fixed the bug for me.