Проблема с прокруткой тела Cordova IOS 12 Wkwebview

У меня есть приложение Cordova (PGB cli-6.5.0, Cordova iOS 4.3.1, wkwebview), которое демонстрирует странное поведение на iOS 12.1. Код работал много лет до iOS 12. Приложение позволяет использовать различные стили ввода числовых значений, реализованные в приложении, но также включает стандартную клавиатуру. В iOS 12 всплывающее окно ввода div или стандартная клавиатура появляется и выглядит как обычно, но прикосновение не регистрируется в нужном месте. Они смещены по вертикали (помните, что визуально все нормально). Это верно даже для стандартной клавиатуры. Изменение ориентации устройства устраняет проблему для этого экземпляра, но проблема остается при следующем выборе входа. Этого не происходит при использовании веб-версии приложения в iOS 12 Safari или в Chrome. Этого не происходит на Android с собственной версией Cordova.

Используя отладчик, я обнаружил, что элемент body имеет ненулевое значение scrollTop после того, как стандартная клавиатура отклонена для ввода, который был бы перекрыт клавиатурой. Такого никогда не должно быть. Исправление, которое я нашел, заключалось в установке body.scrollTop = 0 в обработчике событий onblur.

Я обнаружил, что даже пользовательские вводы, которые не отображали стандартную клавиатуру, делали это. Установка body.scrollTop = 0 вызвала заметный «дребезг» на теле, когда был выбран ввод, который был бы перекрыт стандартной клавиатурой (которая не должна отображаться).

Я играл с установкой KeyboardDisplayRequiresUserAction на false и использовал более свежие выпуски PGB (cli-7.1.0) без изменений. Установка точки останова отладчика в обработчике событий, кажется, указывает на то, что клавиатура отображается, даже если вызывается preventDefault (), она просто снова исчезает перед визуализацией.

Я заставил клавиатуру временно перестать появляться, установив для ввода значение readOnly. Это работает на iPad, но на iPhone вместо клавиатуры появляется навигатор по вкладкам (по сути, это просто стандартный заголовок клавиатуры). Я не мог остановить это на iPhone. Я наконец перешел на использование диапазона вместо ввода, когда я не использую стандартную клавиатуру. В любом случае, это, наверное, к лучшему.

Мой предварительный вывод: есть три ошибки в iOS 12 wkwebview:

  • preventDefault () не полностью предотвращает отображение и прокрутку на клавиатуре тела required. Кажется, просто удаляет его после того, как он отобразился перед рендерингом.
  • Точно так же установка readOnly для элемента ввода не полностью предотвращает отображение клавиатуры.
  • Всякий раз, когда wkwebview отображает клавиатуру после выбора ввода, который будет закрыт клавиатурой, он прокручивает тело, чтобы сохранить видимый ввод, но не может восстановить scrollTop при закрытии, даже если отображение выглядит так, как будто оно было восстановлено. Это смещает все события касания на величину прокрутки. Вы даже можете увидеть анимацию щелчка под пальцем, если коснетесь смещенной кнопки. Также помните, что изменение ориентации устройства восстанавливает правильную прокрутку.

Я не понимаю, как Кордова или мой JS могли вызвать это.

Кто-нибудь еще заметил это?


person srkleiman    schedule 20.11.2018    source источник
comment
Ага! см. github.com/apache/cordova-ios/issues/417#issuecomment -432727776   -  person srkleiman    schedule 09.12.2018


Ответы (1)


РЕШЕНО:

сначала в своем проекте найдите это:

<preference name="DisallowOverscroll" value="false" />

и установить на

<preference name="DisallowOverscroll" value="true" />

затем добавьте это в свое тело css:

position: fixed;
overflow-y: hidden;

ЗАМЕТКА:

  • Я использую Cordova v.9.0.1 и iOS 13.6.1
  • Я заметил, что в моем проекте cordova есть 2 config.xml (я не знаю почему), в любом случае тот, который вам нужно изменить, находится в platforms/ios/<your_app>/config.xml
person Marco Allori    schedule 27.08.2020