Исправлена ​​нижняя панель навигации, не исправлена ⇐ Html

[Anonymous]

У меня серьезная проблема с фиксированным нижним навигационным меню на моем веб-сайте на мобильных устройствах (edge, chrome). Когда я загружаю сайт, когда в мобильных браузерах видна верхняя и нижняя адресная строка/строка меню, все находится на месте. Когда я начинаю прокручивать вниз, браузер выдвигает верхнюю и нижнюю строки адреса/меню. Во время выдвижения фиксированное навигационное меню при скольжении прилипает к нижнему меню браузера - пока все в порядке! Но после достижения нижнего конца (выдвижение меню браузера на 100%) фиксированное навигационное меню снова начинает перемещаться вверх до той самой точки, где раньше была верхняя граница нижнего меню браузера. Я испробовал все, что предлагает Google/Chat-GPT (css, js и т. д.), но ничего не помогло.
Самое странное: это происходит не каждый раз, но когда это происходит, никакая перезагрузка не помогает. ЕДИНСТВЕННАЯ вещь, которая помогает, это: открыть новую вкладку, загрузить любой сайт, вернуться на сайт и вуаля - меню теперь фиксировано внизу.
Чтобы проиллюстрировать это поведение, я снял видео с экрана на своем iPhone: https://www.youtube.com/shorts/P8qGtCBIvcg
Кроме того, я воспроизвел это на простой настройке Sandboy в веб-потоке: https://test-6e1b82-be73db351802bdf0ab9 ... ebflow.io/
вот сам код:

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

body {
color: #333;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
}

.content {
height: 2000px;
}

.mobile-bottom-bar {
background-color: red;
height: 100px;
position: fixed;
inset: auto 0% 0%;
}

.body {
background-color: #c3b090;
}

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

Возможно, вам придется очистить все вкладки браузера и попробовать несколько раз!
Кто-нибудь может помочь? спасибо!!

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