Итак, я заметил, что мобильный Chrome вычисляет адресную строку в высоту области просмотра. Из-за этого использование height: 100vh
для элемента не работает, потому что при height: 100vh
адресной строки высота области просмотра изменяется.
На самом деле мне удалось найти вопрос с такой же проблемой здесь, на ios, но после дальнейшего изучения я понял, что это происходит во всех мобильных браузерах Chrome. Когда адресная строка прокручивается из области просмотра, а затем снова, когда прокручивается в область просмотра, высота области просмотра изменяется.
Это приводит к тому, что любой элемент, использующий vh
пересчитывает, что заставляет страницу перемещаться. Это очень раздражает при использовании фонового изображения, потому что оно вызывает изменение размера изображения при прокрутке.
Вот код и пример
.jumbotron {
background-image: url(http://example.com/image.png);
background-size: cover;
background-position: top;
background-repeat: no-repeat;
height: 100vh;
}
Вы сможете увидеть проблему только при прокрутке вверх и вниз с помощью мобильного Chrome.
Мой вопрос, я хотел бы знать, есть ли способ обойти это или, если нет, как рассчитать полную высоту на мобильном Chrome, не вызывая скачок страницы (CSS или JS).
http://s.codepen.io/bootstrapped/debug/qadPkz
Обновление: Итак, что касается использования jquery, то, что я придумал, похоже, работает довольно хорошо:
function calcVH() {
$('.jumbotron').innerHeight( $(this).innerHeight() );
}
$(window).on('load resize orientationchange', function() {
calcVH();
});
Я хотел бы иметь возможность сделать это без JavaScript, хотя, если у кого-то есть альтернатива CSS, которая, как он знает, работает.