Почему height:100% не срабатывает в safari?

Question

[Nimbus1996]

Ребят, привет! Скажите пожалуйста почему не работает определении области просмотра в safari iOS? Перепробовал все: для body и html прописывал 100% -WebKit-fill-available, для основного блока на странице высчитывал высоты с помощью calc и js по формуле, всё бестолку((
Сначала все хорошо для наглядности границу нижнюю сделал для body и html она определяется правильно над панелью с табами, но потом появляется скролл. Граница основного блока чёрный цветом, меньше чем body и html, элементов, которые выходят за край экрана нет в чём проблема, какие есть варианты куда можно посмотреть?

Comments

[evgeniy_yudin]

Приветствую! Удалось решить эту проблему? Столкнулся с подобным. Во всех браузерах и на всех устройствах страница открывается корректно. Но на айфоне обрезается "шапка". Ничем вылечить не выходит.

Answer 1

[strelok011]

Это обычная проблема для мобильных браузеров, связанная с динамическим изменением высоты вьюпорта браузера при скролле, когда на экране появляются дополнительные панели управления с кнопками.
Есть лайфхак с использованием вместо процентов vh, добавлением js на ресайз окна и переопределением стандартного значения в vh в css-переменную, ссылко
Тут больше вопрос к дизайну мобильного вида страницы, и как она должна выглядеть в зоопарке мобильных устройств (новомодные узкие мобилы, старые ведроиды, планшеты)
Если дизайнер слабо разбирается в этом - будет ад для верстальщика с поддержкой кучи промежуточных разрешений в css со сменой размеров шрифтов, отступов и т.п.

Comments

[Nimbus1996]

height: 100vh;
height: calc(var(--vh, 1vh) * 100);

Прописывал это и основному блоку и body и html и всем сразу, все равно появляется scroll я хз в чём может быть проблема(

[strelok011]

еще раз - при изменении вьюпорта браузер не пересчитывает vh. В ссылке описывается почему и как с этим бороться.
Пока разработчики мобильных браузеров делают то что делают - приходится страдать и учитывать этот нюанс.

[strelok011]

помимо того что Вы написали - нужно вешать на js слушатель на ресайз и переопределять значение vh

[Nimbus1996]

strelok011, не пересчитывает, но при обновлении страницы - пересчитывает, а в моём случае всё равно не пересчитывает, тупо скролл и всё

[Nimbus1996]

strelok011, с другими блоками всё работает: мобильное меню, которое выезжает с высотой 100% работает как надо, корзина с товарами тоже выезжает и работает как надо, но на главной странице появляется свободное пространство

[Nimbus1996]

Nimbus1996, alexandersh-dev.h1n.ru разводящая страница

[strelok011]

То что выезжает - отрабатывает в момент когда размер окна уже изменен и статичен? контент же не пересчитывается после ресайза вьюпорта?

[strelok011]

ну, для начала я нашел как минимум кривую верстку - почему у вас для класса .main задана высота 100% с учетом того что ДО нее находится обычный не абсолютно спозиционированный блок .header-mobile (у которого расчетная высота 69px)?
Верстайте такое пожалуйста на флексах, что ли.
И еще - если браузер не сафари - в консоль падает ошибка js - нужно изолировать такие места, писать if и давать обрабатывать другие сценарии.