Прикрепленные или фиксированные элементы HTML закрываются в мобильных браузерах, когда размер адресной строки изменяется ⇐ CSS

[Anonymous]

HTML-элементы, прикрепленные к верхней части страницы с помощью свойства CSS Position, для которого установлено значение «fixed» или «sticky», часто могут нормально работать на настольных компьютерах, но мобильные веб-браузеры ведут себя совершенно по-другому из-за изменения размера пользовательского интерфейса адресной строки.
Настройка
Эта проблема возникает, когда элемент, закрепленный сверху, вложен. внутри иерархии HTML, но не тогда, когда он помещен непосредственно в тело документа. Конечно, есть некоторые дополнительные предположения (например, стиль элементов html и body), поэтому я предоставляю минимальный POC для воспроизведения поведения.
Пример
При первой загрузке веб-сайта элемент, позиция которого зафиксирована в верхней части экрана, будет отображаться под первоначально развернутой адресной строкой. Когда пользователь прокручивает страницу вниз, адресная строка сжимается до более компактной версии, в результате чего область просмотра меняет размер. Одновременно с этим элемент, закрепленный сверху, также изменит свое положение и при этом перекроется адресной строкой. Когда пользователь затем прокручивает страницу вверх, адресная строка расширяется и, следовательно, открывает фиксированный элемент. Интересно, что это поведение не является «1:1» и последующая прокрутка вверх и вниз ровно настолько, чтобы перекрыть и раскрыть элемент, приводит к чистой прокрутке вниз (при прокрутке вверх элемент раскрывается с более высокой скоростью, а при прокрутке вниз элемент перекрывается пропорционально скорости прокрутки).


Воспроизведение проблемы:



html {
min-height: 100%;
background: lightblue;
}

body {
margin: 0;
min-height: 100%;
}

.navbar {
background: lightcoral;
height: 5rem;
position: fixed;
top: 0;
width: 100%;
}

p {
font-size: 1.5rem;
}





navbar



Content
Content
Content
Content
Content
Content





Частичное исправление
Перемещение элемента в прямой дочерний элемент тела решает эту проблему.


Код для частичного исправления исправить




navbar



Content
Content
Content
Content
Content
Content






Подробнее здесь: https://stackoverflow.com/questions/797 ... ress-bar-c