Наложение липкого заголовка не работает на мобильных устройствах (iOS) [дубликат] ⇐ CSS

[Anonymous]

Я создаю клиентскую страницу 🡥Angular с заголовком, состоящим из строки заголовка .navbar-header и строки списка таблиц .navbar-tabs, причем последняя установлена ​​как прикрепленная. Поэтому, когда я прокручиваю, заголовок должен прокручиваться вместе со страницей, пока строка списка таблиц не окажется вверху.
В настольных браузерах это работает так, как ожидалось. Но на моем телефоне (iOS/Safari и Firefox) это не так: рамка содержимого полностью перекрывает заголовок. Также фрейм контента состоит из нескольких карточек материалов, часть из которых визуально находится позади заголовка, часть — впереди. Но в любом случае я не могу щелкнуть рамку заголовка.


Вот мой HTML:

Код: Выделить всё

Psychotherapie? Mangelware!
#fairchair

Код: Выделить всё

encapsulationДля 

моего компонента навигационной панели установлено значение ViewEncapsulation.Emulated.

Код: Выделить всё

navbar.component.css

выглядит следующим образом:

Код: Выделить всё

:host {
position: relative;
z-index: 1;
}

.navbar-tabs {
position: sticky;
top: 0;
}

И у меня есть следующие глобальные правила стиля:

Код: Выделить всё

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

ОБНОВЛЕНИЕ
Кажется, это связано, но мне это не помогло. Настройка

Код: Выделить всё

html, body {
height: 100%;
}

вместо использования 100vh проблему не решает.


Подробнее здесь: https://stackoverflow.com/questions/782 ... mobile-ios