Я не смогу вам показать демо, которые покажет суть проблемы, но постараюсь максимально описать её, а так же показать решение.
Суть проблемы
Во время разработки сайта вы можете столкнуться с проблемой разработки модального окошка для мобильной версии или для планшета на iOS.
На моем личном опыте: я верстал модальное окно для одного лендинга.
Как правило у него две основные части: (1) overlay — это слой, который перекрывает все остальные элементы страницы (обычно он полупрозрачный) и (2) само модальное окно, которое идет поверх overlay.
Так же: Если кому интересно, я как-то выкладывал пост про модальное окошко выполненное в стиле Material Design.
Для (1), я прописываю position: fixed (чтобы overlay был всегда фиксировано во всю ширину и высоту экрана пользователя и двигался за ним при скролле), ширину и высоту равную 100 прцоентам и возможность скроллить по y-оси.
Для (2), я использую position: absolute и сверху (top: 50%) и слева (left: 50%) делаю по 50% и потом с помощью минусного margin-left: -{w}px и margin-top: -{h}px выравниваю окно по центру. {w} — это ширина и {h} окна деленная на половину.
Для визуального представления можно посмотреть картинку ниже:
Решение
Решение проблемы как оказалось достаточно простое — это использовать overflow свойство, но конкретно для webkit браузеров.
В моем случае скролл делался в overlay окне, тем самым мне нужно дописать следующие свойства для этого блока:
overflow-y: scroll; -webkit-overflow-scrolling: touch;
C overflow-y все понятно. Для нас важнее свойство -webkit-overflow-scrolling. Apple описывает его следующим образом:
Specifies whether to use native-style scrolling in an overflow:scroll element.
Дословный перевод: «хотите вы использовать встроенный скролл устройства (например iPhone 7) или стандартный overflow: scroll«.
Принимаются два значения:
auto — скролл с помощью одного пальца, без моментума
touch — стандартный скролл девайса
