1210mk2
@1210mk2

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

Всем привет.

Набросал песочницу по вопросу:
cssdeck.com/labs/full/9sq4b1ia

Есть родительский блок с display: flex, в нем хеадер, центральный блок (с прокруткой) и футер.

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

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

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

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

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

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

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

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

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

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

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