Menu não sobrepõe no safari (ios)

Front-end CSS
#1

o site em questão é o http://escolaprimeira.com.br/
a estrutura do html é :

                    <menu class="dropmenu">

                        <?php listaMenu(); ?>

                    </menu>

                </nav>

 </header>

e o css assim

.cab{

    width: 100%;

    height: 80px;

    background-color: #fff;

    display: flex;

    position: fixed;

    z-index: 120;

    box-shadow: 0px 2px 5px rgba(175, 175, 175,.8);

}

.cab .navigation{

        display: flex;    
 
        flex-direction: column;

        position: fixed;

        width: 30%;

        min-width: 270px;

        right: 3%;

        top: 50px;

        border: 1px solid #A7C84A;

        z-index: 999 !important;

        transform: translate3d(0,0,0)!important;

    }

    .cab .navigation .dropmenu{

        flex-direction: column;

    }

não consigo entender pq so no iphone ele fica por baixo das outras coisas

#2

Qual é a versão do Safari? Algumas propriedades CSS não foram implementadas em versões antigas como por exemplo a flex-direction que precisa ser usado com webkit (motor de renderização). Por exemplo:

-webkit-flex-direction: column; /* Safari 6.1+ */

Eu costumo consultar esses três sites:

-> W3Schools - CSS;
-> MDN Web Docs - CSS;
-> Webkit Org.

Pois por eles se pode obter várias informações sobre compatibilidade com os mais populares navegadores e os hacks (webkits) aplicáveis.