Почему у меня проблема с CSS с AcceptUIContainer исключительно на iOS? - PullRequest
Новая
       64

Почему у меня проблема с CSS с AcceptUIContainer исключительно на iOS?

0 голосов
/ 02 ноября 2019

Я создаю веб-сайт, hopsandbarrelstours.com . Страница оформления заказа содержит кнопку отправки Authorize.net accept.js. В Chrome на Windows и Android форма оформления заказа работает великолепно. Однако в iOS (будь то в Chrome или в Safari) существует проблема CSS, которая препятствует взаимодействию пользователя со многими элементами на странице.

Если вы хотите повторить проблему, вы можетеперейдите на hopsandbarrelstours.com / tours.html , выберите тур и нажмите кнопку «Забронировать сейчас». Это приведет вас на страницу «checkout.html».

После нескольких часов попыток диагностировать проблему у меня наконец появилось откровение, когда на моем iPhone я смог выбрать и скопировать скрытыйтекст из «заблокированной» области к верхней части страницы. Когда я вставил скопированный текст, это было слово «Информация». Ну, это слово существует только в одном месте в моем исходном коде, в коде кнопки Accept.js. В исходном коде он никогда не представляется в виде текста, который должен быть скопирован через браузер. Однако при загрузке сайта accept.js добавляет на сайт дополнительные элементы:

visual of accept.js containerAcceptUIContainer code

Наконецпозже в AcceptUIContainer содержится следующее:

element showing Card

Сразу же я впервые заметил, что этот контейнер имеет z-index: 99999, что кажется очевиднымвиновник того, как этот элемент может блокировать взаимодействие с другими элементами на странице. Хотя я понимаю цель высокого z-index. Когда пользователь нажимает кнопку «Ввести информацию о кредитной карте», она выглядит следующим образом:

when user clicks submit button

Очевидно, что очень важно, чтобы этот элемент былпредставлены выше всех остальных элементов на странице.

ОЧЕНЬ важно : обратите внимание на слово "Информация" в этом элементе. То естьтолько раз на этой странице слово «Информация» когда-либо представляется пользователю. Это доказывает мне, что этот элемент является нарушителем.

ЗАКЛЮЧЕНИЕ

На самом деле я понятия не имею, почему этот элемент НЕ мешает другомуэлементы на странице независимо от ОС или браузера. Но я особенно не понимаю, почему это мешало бы в iOS, когда это не в Windows или Android. Что еще более важно, я понятия не имею, как решить эту проблему! Пожалуйста, помогите !! (и заранее спасибо).

1 Ответ

0 голосов
/ 03 ноября 2019

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

Из сообщения сообщества Authorize.net ,Вот описание проблемы от кого-то, кто, вероятно, знает больше, чем я:

Может показаться, что iOS обрабатывает визуально [sic]: hidden и opacity: 0 иначе, чем другие браузеры. События взаимодействия по-прежнему работают с такими элементами в iOS, где они не работают с другими. "

Из того же поста, решение, которое я могу подтвердить, решило мою проблему - добавить следующий CSS в мою таблицу стилей:

#AcceptUIContainer {
   max-width:0;
}

#AcceptUIContainer.show {
   max-width:100%;
}

Они объясняют, как это решает проблему:

Если вы посмотрите на div, созданные Accept.js, вы увидите, как это решает проблему. перерыв, если они установили максимальную ширину в своей таблице стилей.

...