Размер sidebar'a меняться с задержкой при скрытии нижнего меню браузера iOS Safari

Question

Есть навигация которая выезжает сбоку при нажатии на кнопку:

.nav{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #0D0A0B;
    overflow-x: hidden;
    transition: .5s ease;
    padding-top: 60px;
    display: block;
}

ПРОБЛЕМА: На iOS Safari при скролле вниз панель инструментов сворачивается. В этот момент сайдбар заполняет не весь экран по высоте (место, которое раньше было отведено для панели инструментов на секунду не заполняется сайдбаром), ну и через мгновение все нормально и сайдбар занимает 100% высоты экрана. Ссылка на GitHub Pages (смотреть только из сафари на телефоне/планшете): https://fkma13552.github.io/navIssue/

Хочется что бы не было такого скачка, как это можно исправить?

Answer 1

При работе с position fixed, если Вы хотите что бы элемент занял всю площадь экрана, и не только viewport'a, то:

.nav {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   z-index: 1;       
   width: 0;      
   background-color: #0D0A0B;
   overflow-x: hidden;
   transition: .5s ease;
   padding-top: 60px;
   display: block;
}

В вашем случае iOS Safari самостоятельно подстроил размер (пускай и с задержкой), но это справедливо не ко всем версиям данного браузера.

БЛОГ НА HUSL

Размер sidebar'a меняться с задержкой при скрытии нижнего меню браузера iOS Safari

Ответы (1 шт):