Почему криво работает height: 100vh для мобильных браузеров Chrome, Yandex, Mozilla?

Question

[lestato9]

Кто знает почему в хроме и мозиле (+ яндекс естественно) значение VH для height не корректно работает? Хотя на can i use сообщается что поддержка есть. Проблема в том что при скролле блок с высотой в VH меняет высоту, а именно увеличивает (хотя не должен). Пример https://lestato9.github.io/verba/public/index.html (большая фоновая картинка, меняется если проскроллить немного вниз и отпустить палец). В сафари и дефолтном андроид браузере такой проблемы нет

Comments

[pochinka_stula_vl]

100vh - на всю высоту экрана устройства
100% - на всю высоту окна, то есть в мобильном хроме эту секцию не обрежет

Answer 1

[Ankhena]

Потому что при прокрутке у этих браузеров убирается верхняя панелька. Соответственно размер вьюпорта увеличивается.

Comments

[lestato9]

В сафари панель уменьшается в высоте - но всё работает нормально. Я тоже первым делом на панельку подумал

[Максим Тимофеев]

lestato9: Дело точно в этом. Просто сафари кривая зараза и не меняет вьюпорт при этом.

[lestato9]

Максим Тимофеев: как фиксить? Мне первым в голову пришел вариант менять vh при достижении размера скролла при котором браузеры скрывают панельки, но это жуткий костыль, так как панельки-то разной высоты в разных браузерах могут быть, да и требуемый размер скролла в них может отличаться

[Ankhena]

lestato9: а браузеры и не обещали работать одинаково

[lestato9]

Максим Тимофеев: либо вообще убирать vh на маленьких экранах. Но не хотелось бы

[Максим Тимофеев]

lestato9: В чем конкретно проблема? Можно скрины, я например, не вижу проблем по Вашей ссылке

[lestato9]

Максим Тимофеев: зайдите с мобильного устройства, и одного из указанных браузеров и всё увидите. Скрином тут не передать

[Максим Тимофеев]

lestato9: Да как-то в падлу вбивать Ваш урл на мобилке. Пройду видимо мимо вопроса, раз автору впадлу скрины делать.

[lestato9]

Максим Тимофеев: Как скрин может передать ресайз блока при скролле? Странный вы.

[Ankhena]

Максим Тимофеев: там картинка на полный экран (bg cover по всей видимости, я в код не смотрела). При наличии панельки они одного размера. При прокрутке панелька убирается, соответственно вьюпорт увеличивается. Ну и картинка масштабируется до нового вьюпорта, т.е. визуально слегка увеличивается.

[Максим Тимофеев]

Ankhena W: Вполне ожидаемое поведение, проблема в чем?

[lestato9]

Максим Тимофеев: в том что высота блока резко меняется, а я хотел бы этого избежать.

[Максим Тимофеев]

lestato9: высота резко меняется, потому что резко меняется значение 100vh в px. Так что либо использовать px, что бы не чего не менялось или добавить transition что бы менялось плавно

[Ankhena]

lestato9: на JS измерить вьюпорт, переписать размеры в пиксели.

[ArtJH]

Ankhena, но тогда появляется белое пространство, когда панелька уходит

[Ankhena]

ArtJH, вопрос был задан более 3х лет назад и сейчас поведение браузеров изменилось.
Поэтому имеет смысл описать проблему сначала, приложив код/ссылку и скрины.