Комментарии 5
Образцовый контент, спасибо!
Но теперь ситуация обратная — клавиатура перекрывает инпут. Перейдём к более жёстким хакам. При открытии модалки высчитаем высоту полезной области без учёта клавиатуры и установим её как высоту модалки
Эта полезная область называется visual viewport. Область экрана с сайтом, когда клавиатура скрыта и нет зума, называется layout viewport. Насколько я знаю, никак нельзя запретить Safari скроллить visual viewport в пределах layout viewport. То есть даже если вы уберёте автоматический скролл при фокусе и уменьшите высоту модалки, пользователь всё равно сможет простым свойпом вверх спрятать крестик-закрывашку за пределы экрана и увидеть кусок страницы под модалкой. Или вы решили эту проблему тоже?
Решил, об этом как раз описано в статье. Решается через динамическое изменение высоты модалки через получение высоты и offset через visualViewport и блокировку скролла
Свайпы не ломают итоговое поведение
Действительно, трюк, описанный в этой статье блокирует скролл visual viewport одним пальцем. Его всё ещё можно скроллить двумя пальцами, но это не критично.
очень подробно и наглядно. Благодарю
Старые и новые проблемы Safari на iOS