В чем нюанс vh на мобильных устройствах

На мобильных устройствах vh может вести себя неожиданно из-за динамических панелей браузера (например, адресная строка). При прокрутке эти панели могут скрываться, изменя высоту viewport, что приводит к скачкам верстки.

Пример:

.block {
  height: 100vh; /* На iOS/Safari может "прыгать" при скролле */
}

Решение:

1. Использовать window.innerHeight в JS:

document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);

2. В CSS:

.block {
  height: calc(var(--vh, 1vh) * 100);
}

Также можно использовать -webkit-fill-available для некоторых случаев. Проблема особенно актуальна для iOS/Safari.