Safari z-index Ошибка

Question

У меня есть два контейнера, и первый должен покрывать часть второго. Я сделал это с z-индексами, и он отлично работает на рабочем столе и на панели инструментов устройства. Но когда я захожу на сайт с мобильной платформы, контейнеры просто смешиваются. Я пробовал webkit, translate3d и до сих пор нет результата. Возможно, я что-то упустил.

HTML

<div class="photoContainer">
<div class="photo"> </div>
</div>

<div class="aboutMe">
    <div class="textContainer">
<br><br>
        <h2 style="text-align: center; font-weight: 700;">About Me</h2>

</div>
    </div>

<div class="projectsContainer">
    <div style="margin-top: 125px;width: 100%;text-align: center;" 
class="titleCont">
        <h2 style="font-weight: 700;">Projects</h2>
    </div>

</div>

CSS

.aboutMe {
overflow: visible;
box-shadow: 5px 5px 7px 3px rgba(195, 192, 192, 0.92);
border-radius: 8px;
margin-top: 65px;
height: 40em;
border: 2px solid #737373;
width: 60%;
position: absolute;
left: 20%;
background-color: rgba(255, 255, 255);
}

.textContainer {
width: 100%;
overflow: auto;
height: 100%;
}

.content-wrapper {
position: relative;
height: 100vh;
margin-top: 100px;
}

.photo {
text-align: center;
width: 100px;
height: 100px;
background-image: url(//url here);
border-radius: 100%;
box-shadow: 3px 3px 7px 3px rgba(195, 192, 192, 0.92);
background-size: contain;
}

.photoContainer {
position: absolute;
z-index: 9999;
justify-content: center;
display: flex;
width: 100%;
}

.projectsContainer {
z-index: -10 !important;
position: relative;
top: 40em;    
width: 100%;
height: 550px;
border: 2px solid #737373;
box-shadow: 4px 3px 7px 5px rgba(195, 192, 192, 0.92);
}

Контейнер aboutMe должен находиться над контейнером projectsContainer. Почему он не работает на ios, если он работает на настольном компьютере?

Заранее спасибо:)

Answer 1

Это потому, что вы используете rgba только для цвета, но вы забыли о альфа-канале.

Установить цвет фона на rgba (255, 255, 255, 1) или # fff или просто white .