Обходной путь для iOS 10-12 Ошибка фокусировки фрейма в браузере WebKit (Safari / Chrome) - PullRequest
Новая
       42

Обходной путь для iOS 10-12 Ошибка фокусировки фрейма в браузере WebKit (Safari / Chrome)

0 голосов
/ 16 октября 2018

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

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ:

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

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

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

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 19 октября 2018

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

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

    input:hover {
        cursor: text
    }

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

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

0 голосов
/ 23 ноября 2018

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

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

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

0 голосов
/ 16 октября 2018

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

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

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

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

...