Проблема с переворачиваемой картой, возникающей при зависании

Question

У меня проблемы с тремя картами наведения.Карты, кажется, выполняют большую часть работы, однако кажется, что содержимое в li исчезает / исчезает при обновлении, загружая страницу , даже если граница li не исчезает в передней частисама карта.Несмотря на то, что заголовок карты остается видимым все время.

Проблема очень очевидна, когда вы пытаетесь (пере) загрузить страницу.Всякий раз, когда вы обновляете страницу, вы можете ясно видеть, как содержимое страницы исчезает на лицевой стороне карты.Хотя фоновое изображение и заголовок карты остаются неизменными

Я думаю, что содержимое теряется при переходе самой карты.

Я в значительной степени перепробовал все свойства, касающиеся преобразования и перехода.По крайней мере, я думаю, что это связано с преобразованием или переходом, потому что вы видите, что контент исчезает при обновлении страницы.Странно то, что заголовок и фоновое изображение на карте остаются неизменными и выполняют свою работу.

Вот мой кодовый блок, так что легче увидеть проблему: https://codepen.io/MaxVervaeke/pen/LvjzVO

HTML

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-one">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-one">The sea <br> explorer</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>3 day tours</li>
                            <li>Up to 20 people</li>
                            <li>2 tour guides</li>
                            <li>Sleep in cozy hotels</li>
                            <li>Difficulty: very easy</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-one">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-two">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-two">The forest <br> hiker</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>5 day tours</li>
                            <li>Up to 10 people</li>
                            <li>6 tour guides</li>
                            <li>Sleep in snuggy hotels</li>
                            <li>Difficulty: medium</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-two">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                        <div class="card__picture picture-three">&nbsp;</div>
                        <h4 class="card__heading">
                            <span class="card__heading--span card__heading--span-three">The snow <br> adventurer</span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>7 day tours</li>
                                <li>Up to 5 people</li>
                                <li>3 tour guides</li>
                                <li>Sleep in provided hotels</li>
                                <li>Difficulty: hard</li>
                            </ul>
                        </div>
                </div>
                <div class="card__side card__side--back card__side--back-three">
                    BACKSIDE
                </div>
            </div>

CSS

.tour-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rem;
padding: 0 5rem;}

.tour-card {
position: relative;
height:700px;
-webkit-perspective: 90rem;
perspective: 90rem;
width:100%;
}

.card__side {
color: #fff;
font-size:1.5rem;
height:700px;
border-radius: 3px;
box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
transition: all 1s ease;
overflow:hidden;
backface-visibility: hidden; 
}


.tour-card:hover .card__side--front {
transform: rotateY(-180deg);
}

.tour-card:hover .card__side--back {
transform: rotateY(0deg);
}


.card__side--front{
background-color: #FFF;
position:relative;
}

.card__picture {
height:15rem;
background-blend-mode: screen;
-webkit-clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
background-size: cover;
}

.picture-one {
background-image: linear-gradient(to right bottom,rgba(255,185,0,1.000),rgba(255,119,48,1.000)), url(../images/trees-sm.jpg);
}

.picture-two {
background-image: linear-gradient(to right bottom,rgba(126,213,11,.7),rgba(40,180,131,.7)),url(../images/lake-bench-sm.jpg);
}

.picture-three {
background-image: linear-gradient(to right bottom,rgba(41,152,255,1.000),rgba(85,67,250,1.000)),url(../images/snowy-route-sm_640.jpg);}


.card__heading {
font-size: 1.5rem;
font-weight:300;
text-transform: uppercase;
text-align: right;
color:#FFF;
position: absolute;
top:30%;
left:60%;
}

.card__heading--span{
padding: .6rem 1rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.card__heading--span-one{background-image: linear-gradient(to right bottom, rgba(255,185,0,.85),rgba(255,119,48,.85))}
.card__heading--span-two{background-image: linear-gradient(to right bottom,rgba(126,213,11,.85),rgba(40,180,131,.85));}
.card__heading--span-three{background-image:linear-gradient(to right bottom,rgba(41,152,255,.85),rgba(85,67,250,.85));}


.card__details ul {
list-style: none;
width:80%;
margin: 0 auto;
}
.card__details ul li {
text-align:center;
font-size: .8rem;
margin: 4rem 0 1rem 0;
border-bottom: 1px solid #777;
}

.card__side--back{
    transform: rotateY(180deg);
    position: absolute;
    top:0;
    left:0;
    width:100%;
}

Ожидаемый результат: у меня есть содержимое между тегами li, которое становится видимым на стороне шрифта страницы, в то время как сейчас оно исчезает / исчезает после обновлениястраница

Answer 1

Возможно, я не понимаю проблемы, но li наследует color: #fff от .card__side. Просто добавьте следующее, чтобы увидеть текст в элементах списка.

.card__details {
  color: #111;
}

Кстати, хороший дизайн и CSS-код, но не используйте transition: all, если хотите думать о производительности.