css стили по-разному отображаются на разных мобильных устройствах

Eсть мобильная версия, при нажатии на иконку меню разворачивается, само меню на всю область экрана в мобильном, после переноса на новый хостинг встала проблема, что на одном iphone работает корректно, а на другом iphonе и на android не выходит на всю область, а сидит внутри div-а. Скрины и код ниже.

Пытаюсь смотреть на z-index, кажется что проблема кроется в порядке слоев div-ов, меняю и ничего не происходит.

Возможно это JavaScript.

<div id="top">
    <a href="javascript:void(0);" onclick="viewdiv('mydiv');" class="ajava"><img src="images/mmenu.png" class="img_menu" title="МЕНЮ"></a>

        <div id="mydiv" style="display:none;">
            <ul>
                <li><a href=index.php title="Главная страница" class="amenu_mob">Главная</a></li>
                <li><a href="catalogtulpanov.php" title="Сорта тюльпанов" class="amenu_mob">Сорта тюльпанов</a></li>
                <li><a href="kupit_tulpan_optom.php" title="Как купить тюльпаны" class="amenu_mob">Как купить тюльпаны</a></li>
                <li><a href="dostavka_tulpanov.php" title="Оптовая доставка тюльпанов" class="amenu_mob">Доставка</a></li>
                <li><a href="gallery.php" title="Наши тюльпаны" class="amenu_mob">Галерея</a></li>
                <li style="border: none;"><a href="contacts.php" title="Контакты" class="amenu_mob">Контакты</a></li>
            </ul>
        </div>

        <div id="top-logo">
            <a href="index.php" title="на главную"><img src="images/st_logo.png"></a>
        </div>
<!--close div-top--></div>

   <script type="text/javascript">

function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}

function toggle_show(id) {
        document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}

</script>

css:

<style type="text/css">

@media (min-width:320px) and (max-width:767px {

#top{
        position:fixed;
        top:0%;
        left:0%;
        width:100%;
        height:48px;
        background-color: rgba(229, 228, 227, 0.8);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(16px);
        z-index:50;
        border-bottom:1px solid #cacaca;
    }

#mydiv{
        position:fixed;
        bottom:0;
        top:0px;
        margin-left:0px;
        display: block;
        width: 100%;
        height:auto;
        overflow-y: scroll;
        z-index:300;
        background-color: #dbdbdb;
    }

 #mydiv ul{
    position:relative;
    padding-top:45px;
    padding-bottom:50px;
    padding-left:20px;
    padding-right:0px;
    text-align:left;
    max-height: 410px;
    z-index:450;
 }
.ajava{
        position:fixed;
        left:0px;
        top:0px;
        z-index:400;
        border:none;
    }
 #top-logo{
    position:fixed;
    width:70px;
    top:12px;
    float:left;
    left:60px;
    vertical-align:top;
    z-index:300;
 }
</style>