Что происходит с overflow hidden, position fixed и 100vh в браузере safari?

Question

[Александр Nameless08]

Всем привет!

Сделал меню для мобильного разрешения. Меню на мобиле спозиционировано fixed + имеет высоту в 100vh:

.th-nav-main {
    position: fixed;
    left: -105%; // 
    top: 0;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    z-index: 999;        
    background-color: rgba(0,0,0,0.95);        
    box-sizing: border-box;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

При этом, при вызове меню я к body цепляю overflow: hidden, т.к у меню есть своя вертикальная полоса:

.th-overflow-hidden {
    overflow: hidden; 
}

На android все ок, выглядит так:

А на iphone ситуация такая:

Выходит что:

1. Позиционирование идет не относительно body, хотя при fixed по идее должно, а относительно шапки
   
2. 100vh не работает
   
3. overflow: hidden у body - тоже, т.к. прокрутка, говорят, осталась
   

Все осложняется тем, что нет возможности протестировать на iphone.

Кто-нибудь сталкивался с подобными проблемами?
Буду весьма признателен за ответы.

Comments

[VegasChickiChicki]

Сталкивался с тем ,что на айпадах и прочей технике яблочных ,в сафари про сколле отлетает шапка с адресной строкой и vh начинает пересчитываться ,из-за этого появляются скачки. То есть когда пользователь скроллит вниз ,у него плашка с адресом сайта укатывается и значение vh изменяется и сайт начинает дергаться.

[Froskyta_1]

https://developer.mozilla.org/en-US/docs/Web/CSS/-...

[Александр Nameless08]

Froskyta_1, применил сюда:

.th-nav-main {
        position: fixed;
        left: -105%; // 
        top: 0;
        overflow: hidden;
        height: 100vh;
        width: 100%;
        z-index: 999;
        
        background-color: rgba(0,0,0,0.95);        
        box-sizing: border-box;

        
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        
        -webkit-overflow-scrolling: auto; 
    }

Ничего не изменилось, к сожалению

Answer 1

[nandeaitsurawapinku]

https://caniuse.com/#search=vh в 3 пункте notes

Comments

[Александр Nameless08]

Это все круто. А что с этим сделать? Есть вариант растянуть на 100% высоты экрана на сафари? При том что fixed тоже по ходу коряво работает т.к. растягивает относительно шапки а не тела дока