Как подружить overflow:hidden в Safari на iOS?

Question

[Mikhail Osher]

На body висит overflow:hidden, который, как я почитал, не работает в ios safari.
Есть модальное окно, position:fixed.
Везде всё хорошо, а на i-девайсах скроллится страница под модалом.
Как это побороть?

Answer 1

[mexsmg]

Проблема в том, что body нельзя поставить position. А значит вам надо обернуть весь сайт в определенный тег, например wrapper, и ему добавлять overflow: hidden; height: 100vh; position: relative; В этом случае все заработает. Проверено на мобильных устройствах в браузере Сафари.

Answer 2

[monochromer]

Мне частично помогло для модального окна
-webkit-overflow-scrolling: touch;

Answer 3

[nzy]

Мне помогло:

touch-action: none;
-ms-touch-action: none;

Answer 4

[Денис Букреев]

высоту поставь 100% (или 100vh)

Comments

[Mikhail Osher]

html, body - height: 100%

[Вячеслав Яшников]

Mikhail Osher, но тогда происходит прокрутка к началу сайта

Answer 5

[Антон Корзунов]

Проблема в том, что мобильный сафари игнорирует overflow:hidden на body.
"Сегодня" самым эффективным способом борьбы является просто блокирование пропагации ивентов, которые могут вызвать скролл в документ.
В общем - https://github.com/thearnica/dom-locky