100lvh не является постоянным в браузере Instagram (с нижней и верхней панелью навигации) ⇐ CSS

[Anonymous]

У меня есть адаптивный веб-сайт, который хорошо работает со всеми браузерами (Safari, Chrome, Firefox) и мобильными устройствами. Но в браузере Instagram это, кажется, не работает, когда я прокручиваю (верхняя и нижняя панели навигации появляются и исчезают, когда я прокручиваю и меняю размер моего глобального гибкого контейнера (я исправил это в мобильной версии Safari с высотой: 100lvh, но это не влияет на Браузер Instagram...).

Пример:

импортировать стили из 'styled-comments'; // Глобальный гибкий контейнер const GlobalContainer = styled.div` дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; гибкое направление: строка; положение: относительное; цвет фона: красный; ширина: 100vw; высота: 100лвх !важно; ` const IntroComponent = React.forwardRef((props,ref) => { return ( ); }); экспортировать IntroComponent по умолчанию Я планирую исправить эту «ошибку» в браузере Instagram и сохранить постоянный размер гибких контейнеров при прокрутке.

РЕДАКТИРОВАТЬ: Наконец-то мне удалось исправить размер с помощью px только для браузера Instagram с помощью:
const isInstagramBrowser = /instagram/i.test(navigator.userAgent);