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

Question

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

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

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

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

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

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

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

ВЫВОД

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

Answer 1

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

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

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

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

#AcceptUIContainer {
   max-width:0;
}

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

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

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