Как скрыть адресную строку iOS Safari при прокрутке вниз в фиксированном макете? ⇐ CSS

[Гость]

У меня есть фиксированный макет моего веб-сайта с заголовком, основным содержанием и нижним колонтитулом. Я использую Tailwind CSS для оформления интерфейса. Несмотря на реализацию различных решений, найденных в Stack Overflow, таких как установка метатегов и оконных событий, мне по-прежнему не удается скрыть адресную строку iOS Safari при прокрутке вниз на iPhone.
У меня есть создал демо-версию codeandbox для вашего удобства.
Вот упрощенная версия моей структуры HTML:

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

Menu
Website Name
Profile










[url=/]Home[/url]
[url=/search]Search[/url]
[url=/rankings]Ranking[/url]

Кроме того, я применил следующие стили CSS:

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

html {
scroll-behavior: smooth;
}

body {
font-family: "Poppins";
overscroll-behavior-y: none;
overflow-y: hidden;
}

*,
body,
html {
margin: 0;
padding: 0;
}

Я пробовал скрыть адресную строку iOS Safari, используя решения, подобные тем, которые предложены в следующих темах Stack Overflow:
Как скрыть адрес бар на айфоне?

Проблема с верхней и нижней строкой iOS Safari
Однако, несмотря на эти попытки, адресная строка остается видимой при прокрутке вниз. Как правильно скрыть адресную строку iOS Safari в фиксированном макете при прокрутке вниз на iPhone? Будем очень признательны за любые идеи или альтернативные решения. Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/784 ... xed-layout