[Bug]: PullToRefresh на мобильном сафари нестабильно работает #5670
Comments
1 task
| ✅ v5.9.3 🎉 |
1 task
mendrew
added a commit
that referenced
this issue
Oct 23, 2023
#6004) - close #2806 - related #5670 и #5967 * Описание Ещё одна попытка победить нативный pull-to-refresh который периодически появляется при закрытии модалки или в PullToRefresh компоненте. В целом событие `touchmove` на window уже игнорируется, но этого недостаточно, потому что для pull-to-refresh в мобильном Safari хватит и одного обработанного браузером`touchstart`. Используется css свойство [`overscroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) на `html` элементе. Перепробывал кучу других вариантов с `touchstart/touchmove` событиями, но единственный действенный это превентить `touchstart`. Но тогда перестаёт работать скролл внутри PullToRefresh, а через JS имитировать скролл браузера неблагодарная задача. * Изменения добавил глобальный класс, которые в последствии будут вешаться на `html` элемент при открытии модалки или при взаимодействии с PullToRefresh. Сейчас уже работает наверняка для `PullToRefresh` компонента и покрывает баг в модалках если закрывать окно потянув из `ModalPageHeader`. Используем классы, а не напрямую меняем style, чтобы не думать и не сохранять предыдущие значения `overscroll-behavior`, это также позволяет избавиться от чтения/записи стилей, чтобы не заставлять браузер готовить и пересчитывать для нас CSSOM в момент чтения/записи style. ** ModalPage - устанавливаем `overscroll-behavior-y: none` когда модалка открыта *** PullToRefresh - класс вешается на `html` на событии `touchstart` и убирается в обработчике собитий `touchend/touchcancel`. * Особенности PullToRefresh. Так как убирается bounce-эффект, то страница становится менее отзывчивая (без эффекта) если это единственный компонент на странице и пользователь доскролил до конца страницы. Но зато можно начать наш PullToRefresh даже если страница уже была чуть проскроллена вниз, а пользователь начал тянуть. Раньше можно было вызвать наш PullToRefresh только если страница имеет `scrollTop = 0` в момент начала жеста. Есть вариант добиться `bounce` эффекта когда пользователь доскроли до конца страницы. Например, добавить к уже имеющейся логику в `touchmove` и смотреть в какую сторону в пределах `PullToRefresh` пользователь скроллит, и если это скролл вниз (пальцем снизу вверх), то убирать класс, если снова скролл вверх, то добавлять класс. Но это так себе решение, потому что мы всегда в `touchstart` выставляем класс, и если пользователь сразу скроллит вниз, то получится, что класс добавиться и тут же убереться. Хотя, не сильно хуже чем сейчас, конечно, потому что мы сейчас и так всегда класс добавляем а на touchend/touchcancel убираем. И ещё момент появится, что если пользователь уже доскроллил до конца страницы и попробует поскролить вниз ещё раз, то bounce-эффекта не будет, ведь на touchmove мы не поймём в какую сторону пользователь скролит. Хотя тут можно поиграться. И посмотреть scrollTop значение. 🤔 Вопрос только стоит ли?
vkcom-publisher
pushed a commit
that referenced
this issue
Oct 23, 2023
#6004) - close #2806 - related #5670 и #5967 * Описание Ещё одна попытка победить нативный pull-to-refresh который периодически появляется при закрытии модалки или в PullToRefresh компоненте. В целом событие `touchmove` на window уже игнорируется, но этого недостаточно, потому что для pull-to-refresh в мобильном Safari хватит и одного обработанного браузером`touchstart`. Используется css свойство [`overscroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) на `html` элементе. Перепробывал кучу других вариантов с `touchstart/touchmove` событиями, но единственный действенный это превентить `touchstart`. Но тогда перестаёт работать скролл внутри PullToRefresh, а через JS имитировать скролл браузера неблагодарная задача. * Изменения добавил глобальный класс, которые в последствии будут вешаться на `html` элемент при открытии модалки или при взаимодействии с PullToRefresh. Сейчас уже работает наверняка для `PullToRefresh` компонента и покрывает баг в модалках если закрывать окно потянув из `ModalPageHeader`. Используем классы, а не напрямую меняем style, чтобы не думать и не сохранять предыдущие значения `overscroll-behavior`, это также позволяет избавиться от чтения/записи стилей, чтобы не заставлять браузер готовить и пересчитывать для нас CSSOM в момент чтения/записи style. ** ModalPage - устанавливаем `overscroll-behavior-y: none` когда модалка открыта *** PullToRefresh - класс вешается на `html` на событии `touchstart` и убирается в обработчике собитий `touchend/touchcancel`. * Особенности PullToRefresh. Так как убирается bounce-эффект, то страница становится менее отзывчивая (без эффекта) если это единственный компонент на странице и пользователь доскролил до конца страницы. Но зато можно начать наш PullToRefresh даже если страница уже была чуть проскроллена вниз, а пользователь начал тянуть. Раньше можно было вызвать наш PullToRefresh только если страница имеет `scrollTop = 0` в момент начала жеста. Есть вариант добиться `bounce` эффекта когда пользователь доскроли до конца страницы. Например, добавить к уже имеющейся логику в `touchmove` и смотреть в какую сторону в пределах `PullToRefresh` пользователь скроллит, и если это скролл вниз (пальцем снизу вверх), то убирать класс, если снова скролл вверх, то добавлять класс. Но это так себе решение, потому что мы всегда в `touchstart` выставляем класс, и если пользователь сразу скроллит вниз, то получится, что класс добавиться и тут же убереться. Хотя, не сильно хуже чем сейчас, конечно, потому что мы сейчас и так всегда класс добавляем а на touchend/touchcancel убираем. И ещё момент появится, что если пользователь уже доскроллил до конца страницы и попробует поскролить вниз ещё раз, то bounce-эффекта не будет, ведь на touchmove мы не поймём в какую сторону пользователь скролит. Хотя тут можно поиграться. И посмотреть scrollTop значение. 🤔 Вопрос только стоит ли?
vkcom-publisher
pushed a commit
that referenced
this issue
Oct 23, 2023
#6004) - close #2806 - related #5670 и #5967 * Описание Ещё одна попытка победить нативный pull-to-refresh который периодически появляется при закрытии модалки или в PullToRefresh компоненте. В целом событие `touchmove` на window уже игнорируется, но этого недостаточно, потому что для pull-to-refresh в мобильном Safari хватит и одного обработанного браузером`touchstart`. Используется css свойство [`overscroll-behavior`](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior) на `html` элементе. Перепробывал кучу других вариантов с `touchstart/touchmove` событиями, но единственный действенный это превентить `touchstart`. Но тогда перестаёт работать скролл внутри PullToRefresh, а через JS имитировать скролл браузера неблагодарная задача. * Изменения добавил глобальный класс, которые в последствии будут вешаться на `html` элемент при открытии модалки или при взаимодействии с PullToRefresh. Сейчас уже работает наверняка для `PullToRefresh` компонента и покрывает баг в модалках если закрывать окно потянув из `ModalPageHeader`. Используем классы, а не напрямую меняем style, чтобы не думать и не сохранять предыдущие значения `overscroll-behavior`, это также позволяет избавиться от чтения/записи стилей, чтобы не заставлять браузер готовить и пересчитывать для нас CSSOM в момент чтения/записи style. ** ModalPage - устанавливаем `overscroll-behavior-y: none` когда модалка открыта *** PullToRefresh - класс вешается на `html` на событии `touchstart` и убирается в обработчике собитий `touchend/touchcancel`. * Особенности PullToRefresh. Так как убирается bounce-эффект, то страница становится менее отзывчивая (без эффекта) если это единственный компонент на странице и пользователь доскролил до конца страницы. Но зато можно начать наш PullToRefresh даже если страница уже была чуть проскроллена вниз, а пользователь начал тянуть. Раньше можно было вызвать наш PullToRefresh только если страница имеет `scrollTop = 0` в момент начала жеста. Есть вариант добиться `bounce` эффекта когда пользователь доскроли до конца страницы. Например, добавить к уже имеющейся логику в `touchmove` и смотреть в какую сторону в пределах `PullToRefresh` пользователь скроллит, и если это скролл вниз (пальцем снизу вверх), то убирать класс, если снова скролл вверх, то добавлять класс. Но это так себе решение, потому что мы всегда в `touchstart` выставляем класс, и если пользователь сразу скроллит вниз, то получится, что класс добавиться и тут же убереться. Хотя, не сильно хуже чем сейчас, конечно, потому что мы сейчас и так всегда класс добавляем а на touchend/touchcancel убираем. И ещё момент появится, что если пользователь уже доскроллил до конца страницы и попробует поскролить вниз ещё раз, то bounce-эффекта не будет, ведь на touchmove мы не поймём в какую сторону пользователь скролит. Хотя тут можно поиграться. И посмотреть scrollTop значение. 🤔 Вопрос только стоит ли?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Описание
Проблема с компонентом PullToRefresh в мобильном сафари - через раз вместо него срабатывает нативный
Версия
5.7.1
В каких браузерах воспроизводится проблема?
Safari
Шаги воспроизведения
Потянуть экран вверх. Иногда срабатывает нативный pull-to-refresh, иногда - vkui, а иногда - оба
Ожидаемое поведение
Всегда должен срабатывать vkui
Скриншоты
Пример с воспроизведением
https://codesandbox.io/embed/sleepy-banach-j3fsm5?fontsize=14&hidenavigation=1&theme=dark
смотреть на реальном айфоне или на эмуляторе xcode
The text was updated successfully, but these errors were encountered: