Обходной путь для 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 критерия:

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

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

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

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

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

Ответы

    input:hover {
        cursor: text
    }

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