Обходной путь для ошибки фокусировки iframe в iOS 10–12 WebKit (Safari/Chrome) ⇐ IOS

[Anonymous]

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

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

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

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

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


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

Для потомков я собираюсь предложить обходной путь, с которым я столкнулся в отдельной, но частично связанной с ошибкой WebKit. Однако мне было интересно, сталкивались ли другие с этой проблемой и нашли ли другие обходные пути.
ОБНОВЛЕНИЕ:
Покопавшись дальше, я обнаружил, что у нас есть две отдельные ошибки. Первый в основном такой, как я описал выше, но, похоже, это скорее проблема рендеринга, когда iOS не выглядит так, будто фокусируется на поле. Однако, если вы перейдете к новому примеру codepen, который я настроил, и выполните шаги, даже если кажется, что поле не находится в фокусе, если вы наберете текст, он будет отображаться правильно. Вторая проблема менее вероятна, но она более вредна. Для срабатывания требуется 3 критерия:
[*]Источник iframe должен иметь перекрестное происхождение. [*]Родительская страница присоединяет прослушиватель событий к Touchstart, TouchMove или Touchend (даже к простому вызову пустой функции) [*]Поле iframe находится за пределами экрана, если в фокусе находится другое поле и присутствует клавиатура.
Результатом этих трех вещей является то, что пользователь вообще не может сосредоточить внимание на поле iframe (ввод никуда не ведет, хотя document.activeElement показывает, что последний ввод родительской страницы имеет фокус). Восстановление возможности получения фокуса в iframe может быть затруднено. Обычно необходимо иметь ввод родительской страницы, который может быть сфокусирован, пока поле iframe видимо, после чего пользователь может переместить фокус на поле iframe. оттуда.

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

Я также обновлю свой «ответ» ниже, учитывая это осознание.

Обновление 2: Новый пример, который я привел, показывает обе ошибки в действии; первая страница — это ошибка № 1 со ссылкой на пример ошибки № 2 для разных источников.