Обходной путь для iOS 10-12 WebKit (Safari/Chrome) ошибка iframe focus

Я искал эту конкретную проблему здесь, в Qaru и различных системах отчетов об ошибках Apple/WebKit, но пока не нашел ее специально процитированной (что просто не представляется возможным).

Проблема: На нашей странице оплаты у нас есть различные поля формы (входы и выборки). Для целей PCI/безопасности у нас есть iframe, который обслуживает поле номера кредитной карты (у iframe есть только одно это поле - больше ничего).

Проблема заключается в том, что только для пользователей iOS они иногда не могут сфокусироваться на поле номера кредитной карты. Похоже, есть 2 разных, но связанных с этим ошибки в веб-наборе iOS. Смотрите ОБНОВЛЕНИЕ ниже.

Если они просто перемещаются вниз от одного поля к другому, это обычно работает. Но если они подпрыгивают вокруг полей, они могут попасть в сценарий, где "попробуй, как они" могут ~~, они не могут получить фокус в поле номера кредитной карты~~, это не похоже, что поле кредитной карты получает фокус (похоже, это проблема рендеринга).

Первоначально мы думали, что, возможно, JS или какой-то невидимый DIV мешают, но в итоге я смог создать пример только для HTML, чтобы воссоздать проблему. (Инструкции о том, как воссоздать проблему, приведены на странице примера.) Чтобы добавить ссылку на кодовый блок, я должен включить некоторый код:

<iframe src="iframe.html"></iframe>

Мне постоянно удавалось воссоздать эту проблему на устройствах iOS 10-12 (похоже, что на устройстве iOS 9 проблемы не было).

Для потомков я собираюсь предоставить обходной путь, с которым я столкнулся в отдельной, но частично связанной ошибке WebKit. Однако мне было интересно, сталкивались ли другие с этой проблемой и обнаружили ли другие способы обхода.

UPDATE:

После дальнейшего изучения я обнаружил, что мы страдаем от 2 отдельных ошибок. Первый - в основном, как я описал выше, но, похоже, это скорее проблема рендеринга, когда iOS не выглядит так, как будто фокусируется на поле. Тем не менее, если вы перейдете к примеру ~~codepen~~ ,к новому примеру я настрою и выполняю шаги, даже если они не выглядят так, как будто поле имеет фокус, если вы напечатаете текст, будет отображаться правильно.

Вторая проблема встречается реже, но она более пагубна. Для поездки требуется 3 критерия:

Источник iframe должен быть перекрестного происхождения
Родительская страница присоединяет прослушиватель событий к сенсорному запуску, сенсорному перемещению или прикосновению (даже так просто, как пустой вызов функции)
Поле iframes находится вне экрана, когда другое поле имеет фокус и присутствует клавиатура.

Результатом этих трех вещей является то, что пользователь вообще не может фокусироваться на поле iframe (при наборе текста ничего не происходит, хотя document.activeElement показывает последнюю родительскую страницу, имеющую фокус). Восстановление способности получить фокус в iframe может быть затруднено, как правило, требуется наличие родительской страницы, которая может быть сфокусирована, пока поле iframe видимо, тогда пользователь может переместить свой фокус на поле iframe оттуда.

Если какой-либо из этих трех критериев изменен (не междоменный, нет прослушивателей событий для этих трех событий касания или отображается iframe), то присутствует только первая, менее запретительная ошибка.

Я также обновлю свой "ответ" ниже с этой реализацией.

Обновление 2: Новый пример , который я выложил, показывает обе ошибки в действии; первая страница - ошибка # 1 со ссылкой на пример ошибки # 2 с несколькими источниками.

Ответ 1

Проблема решается в моем окружении путем добавления предложения @Ryan L document.addEventListener('touchstart', {}); в IFrame.

Это хорошо, поскольку его очень просто добавить и оно относится к IFrame, не затрагивая страницу контейнера.

Описание проблемы: невозможно "коснуться" (выбрать, изменить) другое поле формы в Safari, работающем на iDevices (phone & pad) под управлением iOS 12. Это происходит только на страницах в IFrame, где на странице контейнера добавлены некоторые сенсорные события. Очень непонятный набор условий, которые сложно отлаживать.

Ответ 2

Я считаю, что нашел исправление для этой расстраивающей маленькой ошибки, и, как и большинство ошибок, это простое исправление.

Все, что нужно сделать, это применить следующий css для ввода в iframe.

    input:hover {
        cursor: text
    }

Вот обновленный пример: https://codepen.io/ryanoutloud/project/full/AEKGjj

Теперь, что касается самой ошибки, фокус находится на целевом поле, и любая запись с клавиатуры будет зарегистрирована должным образом. Как только ввод начинается, каретка переходит в правильное положение.
проблема, которую я нашел с помощью решения ontouchstart="" состоит в том, что она просто удаляет карету из вида полностью, только когда фокус помещается в поле.

Ответ 3

Здесь обход я наткнулся: добавьте ontouchstart="" к каждому из элементов ввода формы (возможно, тоже выбирает).

Это произошло из одной из проблем, связанных с этой ошибкой WebKit, связанной с событиями на внешнем клике, которые не правильно отправляются на iframe (в контексте масштабирования).

Я еще не подтолкнул это к производству, но первоначальные тесты, похоже, указывают на это. Я должен был поместить это в оба элемента parent & iframe, чтобы полностью исправить проблему. Я, вероятно, буду использовать JavaScript, чтобы прикрепить его к полям формы, не добавляя свойство к каждому элементу формы.

Открыта для любых других предложений или проблем с этим подходом.

Ответ 4

эта работа для меня

document.addEventListener('keydown', function(e) {
  window.focus()
  $(':focus').focus()
});