为什么我只在 iOS 上遇到 AcceptUIContainer 的 CSS 问题？

Question

我正在建立一个网站，hopsandbarrelstours.com。结帐页面包含一个 Authorize.net accept.js 提交按钮。在 Windows 和 Android 上的 Chrome 中，结帐表单运行良好。但是，在 iOS（无论是 Chrome 还是 Safari）中，存在一个 CSS 问题，阻止用户与页面上的许多元素进行交互。

如果您想重现该问题，可以转至 hopsandbarrelstours.com/tours.html、select 导览并单击 "Book Now" 按钮。这将使您进入违规的 "checkout.html" 页面。

在尝试诊断问题几个小时后，我终于有了启示，在我的 iPhone 上，我能够 select 并将隐藏文本从 "blocked" 区域复制到页面顶部。当我粘贴复制的文本时，它是 "Information" 这个词。嗯，这个词只存在于我的源代码中的一个地方，在 Accept.js 按钮的代码中。在源代码中，它从未显示为可通过浏览器复制的文本。但是，当网站加载时，accept.js 会像这样向网站添加其他元素：

最后，稍后包含在 AcceptUIContainer 中的是：

立即，我的第一个观察是这个容器有 z-index: 99999，这似乎是这个元素如何阻止与页面上其他元素交互的明显罪魁祸首。不过，我确实理解 high z-index 的目的。当用户单击 "Enter Credit Card Information" 提交按钮时，它显示如下：

显然，将此元素显示在页面上所有其他元素之上非常重要。

非常重要：请注意此元素中的单词"Information"。 这是此页面上唯一一次向用户显示 "Information" 一词。这向我证明了这个元素是罪犯。

结论

我实际上不知道为什么这个元素不会干扰页面上的其他元素，无论 OS 还是浏览器。但我特别不明白为什么它会干扰 iOS 而它不会干扰 Windows 或 Android。更重要的是，我完全不知道如何解决这个问题！ 请帮忙！！（提前谢谢你）。

Answer 1

好吧，事实证明，一旦我诊断出问题的确切原因，我就可以使用 Google 轻松找到解决方案。

来自Authorize.net Community Post，这是一个可能比我更了解的人对问题的描述：

It would appear that iOS treats visibilily [sic]: hidden and opacity: 0 differently than other browsers. Interaction events still work on such elements in iOS where they do not on others."

从同一个 post，我可以确认解决了我的问题的解决方法是将以下 CSS 添加到我的样式表中：

#AcceptUIContainer {
   max-width:0;
}

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

他们解释了如何解决问题：

If you look at the divs that are created by Accept.js you can see how this fixes the issue. It will break if they set a max-width in their style sheet.

为什么我只在 iOS 上遇到 AcceptUIContainer 的 CSS 问题？

Why am I having a CSS issue with AcceptUIContainer on iOS exclusively?

css

authorize.net

accept.js