Расширение 100vh/svh в мобильном Chromium (НЕ печально известная проблема с адресной строкой) ⇐ CSS

[Anonymous]

Есть идеи, почему 100vh/svh/dvh и т. д. приводит к удлинению элемента div в мобильных браузерах на базе Chromium при начальной загрузке?
Я протестировал это с самой простой возможной реализацией и проблема постоянно воспроизводится при первом открытии страницы с помощью адресной строки, но будет решена, если страница будет обновлена ​​или когда вы щелкнете в любом месте открытой вкладки браузера.
Тот же результат при использовании JS, чтобы определить высоту окна и применить ее к элементу div, поскольку это была моя первая идея обходного пути. Кажется, не имеет значения, какое свойство отображения используется для рассматриваемого элемента (flex/table/block и т. д.) или как оно позиционировано.
https://i. sstatic.net/LLZwJldr.png
https://anno.agency/100vh-test/
На видео ниже проблема решается с помощью просто нажмите в любом месте вкладки браузера:
https://youtube.com/shorts/tH9NIlUunEo

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

Chromium 100vh implementation test


.wrapper {
width: 100%;
height: 100vh;
display: table;
position: absolute;
top: 0;
left: 0;
background: #f00;
text-align: center;
}
.wrapper > div {
display: table-cell;
vertical-align: middle;
}





Centre

Подробнее здесь: https://stackoverflow.com/questions/789 ... -bar-issue