Frontend-разработчики, которые делают мобильные версии сайтов и веб-сервисов неминуемо сталкиваются с таким чудесным браузером как Safari на iOS. Воистину, этот браузер имеет свое уникальное мнение о многих вещах, касающихся отображения и поведения верстки.
Хотим рассказать решение одной из связанных с ним частых проблем, которая, мы уверены, сгубила нервы многих Frontend-разработчиков по всему миру. А именно проблему прокрутки внутри блоков, расположенных поверх страницы (таких как, например, модальные окна или боковые меню).
Увы, если положить блок, например, с помощью
position: fixed поверх страницы, задать ему размеры и указать overflow: auto, то iOS Safari при его прокрутке устроит вам настоящий парад багов (https://vimeo.com/239318767/2240902c40):1) Вместо (и во время) прокрутки в блоке двигается страница на фоне.
2) Как следствие, раскрываются/схлопываются верхняя и нижняя панели браузера.
3) Если контент блока меньше его высоты (прокрутка не нужна), то свайпы всегда прокручивают страницу на фоне.
4) Если блок полноэкранный, то его нижняя часть уходит под нижнюю панель браузера.
5) Меняется высота всплывающего блока и появляется пустота под ним.
Если изучить сайты с подобными элементами, то видно, что эту проблему либо игнорируют вообще, либо исправляют не полностью, либо чинят с помощью JavaScript-прокрутки вроде iScroll (что приводит к десятку других проблем и багов, вроде неверного расчета высоты прокручиваемой области или невозможности пользоваться элементами форм).
От этой проблемы и всех ее симптомов можно достаточно легко избавиться. Рассказываем как:
Отключить прокрутку страницы можно с помощью CSS, добавив
position: fixed для body. Страница при этом прокрутится к началу, но эту мелочь легко исправить, установив, также, в стилях body значение свойства top соответствующее текущему положению прокрутки страницы.В плане кода, решение проблемы легко умещается в один CSS-класс и пару функций (заблокировать/разблокировать прокрутку):
https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x
Посмотреть решение в действии вы можете, например, на бете новой мобильной версии онлайн-гипермаркета «Утконос» (https://www.utkonos.ru), презентацию и историю создания которой мы скоро опубликуем на сайте Студии.