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

Всем привет.

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

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

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

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

Подскажите, как победить?
  • Вопрос задан
  • 5354 просмотра
Пригласить эксперта
Ответы на вопрос 4
profesor08
@profesor08 Куратор тега CSS
transform: translateZ(0);

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

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

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

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

А так-же не стоит забывать, что у тебя используется flex, а flex + safari = баги. По этому лучше все эти правила задавай для внутреннего блока, у который растянут на высоту контейнера.
Ответ написан
1210mk2
@1210mk2 Автор вопроса
Вот видео бага
bug
Ответ написан
Комментировать
@KonstantoS
1210mk2 решение какое-то нашли по прошествии времени? Не знаю даже как это гуглить правильно дело, Ваша ситуация 1 в 1 как у меня сейчас.
Ответ написан
zerxx
@zerxx
В итоге никак это не победить.
Выход: отказаться от flex в контейнере со скроллом. Я у себя в js сделал проверку на ios с добавлением специального класса контейнеру, и в нем прописал отдельные стили под ios.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы