为什么我在 iOS 上的 AcceptUIContainer 出现 CSS 问题？

Question

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

如果您想复制该问题，您可以转到hopsandbarrelstours.com/tours.html，选择一个游览并单击“立即预订”按钮。这会将您带到有问题的“checkout.html”页面。

在尝试诊断问题数小时后，我终于发现，在我的 iPhone 上，我能够从页面顶部的“被阻止”区域选择并复制隐藏文本。当我粘贴复制的文本时，它是“信息”一词。好吧，这个词只存在于我的源代码中的一处，即 Accept.js 按钮的代码中。在源代码中，它永远不会显示为应该可以通过浏览器复制的文本。但是，当网站加载时，accept.js 会向网站添加额外的元素：

最后，AcceptUIContainer 中包含的内容如下：

立即，我的第一个观察是这个容器有z-index: 99999，这似乎是这个元素如何阻止与页面上其他元素交互的明显罪魁祸首。不过，我确实理解高 z-index 的目的。当用户点击“输入信用卡信息”提交按钮时，显示如下：

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

非常重要：请注意此元素中的“信息”一词。这是该页面上唯一一次向用户呈现“信息”一词。这向我证明了这个元素是罪犯。

结论

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

Answer 1

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

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

iOS 似乎会处理可见 [原文如此]：隐藏和不透明： 0 不同于其他浏览器。交互事件仍在进行中 iOS 中的这些元素在其他元素上没有。”

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

#AcceptUIContainer {
   max-width:0;
}

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

他们解释了它是如何解决问题的：

如果您查看 Accept.js 创建的 div，您会发现它是如何解决问题的。如果他们在样式表中设置了最大宽度，它将中断。