Изменение размера фонового изображения героя во весь рост на мобильном свитке

Question

У меня проблема с тем, что фоновое изображение, которое я установил для своего героя в полный рост, меняет размеры, когда пользователь прокручивает на мобильном устройстве из-за строки URL. Это заставляет изображение привязываться к новому размеру, когда пользователь прокручивает, вызывая эффект дрожания. Это кажется распространенной проблемой при использовании 100vh, поэтому я пробовал множество обходных путей, включая использование js для получения размера окна при загрузке страницы и установки высоты героя вручную. У меня есть пример использования Bulma ниже, который использует 100vh для своего is-fullheight героя.

Код: https://codepen.io/Stetzon/pen/JjdQmzN

Демо: https://cdpn.io/Stetzon/debug/JjdQmzN/RBMOJXzxwDbk (должен быть на мобильном телефоне, чтобы увидеть эффект)

Answer 1

Вот js, который мне нужно было сделать для моего проекта.

Он дает вам высоту окна просмотра, когда отображается URL-бар.

var height = Math.min(document.documentElement.clientHeight, window.innerHeight || 0);