-webkit-overflow-scrolling: touch в iOS и потеря скролла?

Question

[1210mk2]

Всем привет.

Набросал песочницу по вопросу:
cssdeck.com/labs/full/9sq4b1ia (сдохла уже)
Есть родительский блок с display: flex, в нем хеадер, центральный блок (с прокруткой) и футер.

Прошу сразу посмотреть на iPhone, тк на десктопе проблемы нет.
Центральный блок для плавной инерционной прокрутки с -webkit-overflow-scrolling: touch
Если мы его поскроллим - всё ок.
Теперь если поскроллить попытаться например футер и после этого снова поскроллить центральный блок - в половине случаев прокрутка не сработает.
При таче на него и повторном скролле - всё снова работает.
Как будто центральный блок теряет фокус и восстанавливает его ко 2му нажатию.

Вот видео бага
bug

Смотрел видео с переносом в отдельный граф слой (translateZ, в css закоментарено), подключал библиотеку scroll-lock - не помогает.

Подскажите, как победить?

Answer 1

[profesor08]

transform: translateZ(0);

Серебряная пуля для Safari.

Еще для блоков, у которых предусматривается прокрутка, задают -webkit-overflow-scrolling: touch, если что-то не то с прокруткой происходит.

И про viewport не стоит забывать.

И overflow-y должен быть auto, иначе будь добр самостоятельно прокручивать содержимое.

А так-же не стоит забывать, что у тебя используется flex, а flex + safari = баги. По этому лучше все эти правила задавай для внутреннего блока, у который растянут на высоту контейнера.

Comments

[1210mk2]

извините, у меня пятнадцатилетний опыт веб-разработки, тонкости сафари не было случая постичь.
с описанной проблемой бьюсь уже второй день.
сделал дочерний блок, повесил overflow на него (отвязал от flex, так сказать), но проблема всё еще актуальна.

И про viewport не стоит забывать.

Вот как это расценивать?
мой вьюпорт вот:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=no">

просто прошу вас зайти в пример и поправить так, чтоб
ответ не выглядел как "РОССИЯНЕ В ШОКЕ! для избавления от прыщей достаточно втирать обычный".
сможете помочь?

Answer 2

[1210mk2]

Вот видео бага
bug

Answer 3

[Mike & Bob]

В итоге никак это не победить.
Выход: отказаться от flex в контейнере со скроллом. Я у себя в js сделал проверку на ios с добавлением специального класса контейнеру, и в нем прописал отдельные стили под ios.

Answer 4

[KonstantoS]

1210mk2 решение какое-то нашли по прошествии времени? Не знаю даже как это гуглить правильно дело, Ваша ситуация 1 в 1 как у меня сейчас.

Comments

[1210mk2]

Нет, в том-то и дело. Я б с удовольствием призвал сюда профи по ios, но не знаю как.

[IIIu6ko]

KonstantoS Тоже сегодня столкнулся с подобной проблемой. У меня выезжающее меню.
Сначала грешил на scroll-lock, но оказалось что всё дело в transform. У меня вещался класс на body с transform: translateX(320px) и таким образом выезжало меню.
Скролл аналогично работал не плавно, -webkit-overflow-scrolling: touch не помогал.
Переделал с трансформа на обычный left и всё заработало как надо.