My menu appears all broken in Safari browser

Question

Good morning, I developed a website and when I open in Safari browser iphone and on Macbook it presents me all breaking... the li appears one below the other, in the mobile part when I open the menu it appears only the header, the rest seems to be behind the Section... anyway, I put z-index: 9999; on the menu and also put z-index: -1; in Ction, even though it’s not working... I think it’s something of webkit, I went after how it works, and I couldn’t find anything related, someone could help me?

html:

<div class="mobile-content">
                <ul class="menu-mobile">
                    <li class="menu-item">Menu</li>
                    <li class="menu-item" onclick="submenuMobile(this)">
                        O Instituto
                        <ul class="submenu">
                            <li class="menu-item"><a href="nossa-causa.php">Nossa causa</a></li>
                            <li class="submenu-item"><a href="quem-somos.php">Quem somos</a></li>
                            <li class="submenu-item"><a href="conselho-e-equipe.php">Equipe</a></li>
                            <li class="menu-item"><a href="trabalhe-conosco.php">Trabalhe Conosco</a></li>
                        </ul>
                    </li>
                    <li class="menu-item" onclick="submenuMobile(this)">Atuação
                        <ul class="submenu">
                            <li class="submenu-item"><a href="como-trabalhamos.php">Como trabalhamos</a></li>
                            <li class="submenu-item"><a href="parcerias.php">Parceirias</a></li>
                            <li class="submenu-item"><a href="evento-parques-do-brasil.php">Evento Parques do Brasil</a></li>
                        </ul>
                    </li>
                    <li class="menu-item"><a href="publicacoes.php">Publicações</a></li>
                    <li class="menu-item"><a href="imprensa.php">Imprensa</a></li>
                </ul>
                <ul class="social-media">
                    <li class="social-media-item"><a href="https://www.linkedin.com/company-beta/1667258/" target="_blank"><img src="images/linkedin.png" alt="Linkedin"></a></li>
                    <li class="social-media-item"><a href="https://www.youtube.com/channel/UCm2vbjTHVHw_yfZS2vGyR2w" target="_blank"><img src="images/youtube.png" alt="Youtube" style="margin-bottom: -5px"></a></li>
                </ul>

                <p class="phone-header">11 5180-0265</p>
            </div>

css:

    main {
      header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        // z-index: 10;
        height: 85px;
        overflow: hidden;
        background: $white;
        z-index: 99999;


        .container {
          &.header {
            display: flex;
            justify-content: space-between;
            align-content: center;
            height: 100px;
            background: $white;
       }
      }
     }
    }

@media screen and (max-width: 980px) {
.mobile-content {
        display: block;
        transition: .4s;
        right: -100vw;
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 70%;
        background: $blue;
        color: $white;
        padding: 8%;
        box-sizing: border-box;
        font-size: 5vw;
        height: 100%;
        z-index: 9999999999999999999999999;
      }
}

Follow the print below to help...