Липкий заголовок CSS перекрывает якорные ссылки только в мобильных браузерах? ⇐ CSS

[Anonymous]

Я столкнулся со странной проблемой с позицией: липким заголовком на сайте на базе WordPress. На настольном компьютере все работает нормально, но на мобильных устройствах (Chrome/Safari) при нажатии на ссылку привязки к определенному разделу прикрепленный заголовок перекрывает верхние 80 пикселей содержимого.
Я пробовал использовать Scroll-margin-top: 100px; в целевых разделах, но, кажется, игнорируется мобильной областью просмотра.
Вы можете увидеть поведение на действующем сайте здесь: https://portmaking.pk/ (попробуйте щелкнуть любую ссылку перехода «Спецификации продукта» в меню на мобильном устройстве).
Мой CSS:

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

.site-header {
position: sticky;
top: 0;
z-index: 9999;
}
.section-target {
scroll-margin-top: 100px;
}

Есть ли какая-то особенность мобильного браузера с прокруткой поля и липкими заголовками, которую мне не хватает, или есть лучший способ динамического расчета смещения на основе JavaScript?

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-browsers