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

[Гость]

Я создаю клиентскую страницу 🡥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;
}


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