iOS 10-12 WebKit（Safari / Chrome）iframe焦点错误的解决方法

Question

我已经在StackOverflow和各种Apple / WebKit错误报告系统上搜索了此特定问题，但尚未找到它被专门引用（这似乎不太可能）。

问题：在付款页面上，我们有各种表单字段（输入和选择）。出于PCI /安全性的目的，我们有一个iframe服务于信用卡号字段（该iframe 仅具有一个字段，别无其他）。

问题在于，仅 iOS用户有时无法将重点放在信用卡号字段上。似乎有2个不同但相关的iOS Webkit错误。请参阅下面的更新。

如果他们只是简单地从一个字段导航到另一个字段，则通常可以使用。但是，如果他们在字段周围弹跳，他们可能会遇到这样的情况，即可能尝试时无法将焦点集中到信用卡号字段上，这看起来像是信用卡字段无法获得焦点（似乎是渲染问题）。

最初，我们认为可能是JS或一些不可见的DIV介入了，但是我最终能够创建一个仅HTML的示例来重现该问题。（有关如何重现此问题的说明，请参见示例页面。）链接到Codepen要求我包含一些代码：

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

我一直能够在iOS 10-12设备上重新创建此问题（iOS 9设备似乎没有问题）。

为了后代，我将提供在一个单独的但半相关的WebKit错误中遇到的解决方法。但是，我想知道其他人是否偶然发现了这个问题并发现了其他解决方法。

更新：

深入研究之后，我发现我们遇到了2个独立的bug。首先是大部分像我上面描述，但似乎更多的是呈现的问题在哪里iOS不看就像是把着眼点放在一个领域。但是，如果您转到Codepen示例 新示例，则我将设置并按照步骤进行操作，即使在看起来好像字段没有焦点的情况下，如果您键入该文本，也将正确呈现。

第二个问题不太可能发生，但更有害。跳闸需要3个条件：

1. iframe的来源必须是跨源的
2. 父页面将事件侦听器附加到touchstart，touchmove或touchend（即使是简单的空函数调用）
3. 当另一个字段具有焦点并且存在键盘时，iframe的字段将不在屏幕上。

这三件事的结果是用户根本无法将焦点放在iframe字段上（尽管document.activeElement显示了最后一个具有焦点的父页面输入），键入没有任何作用。重新建立在iframe中获得焦点的能力可能很困难，通常需要在iframe字段可见时具有可聚焦的父页面输入，然后用户可以将焦点从那里移至iframe字段。

如果3个条件中的任何一个发生了更改（不是跨域的，则在这3个触摸事件或iframe上都没有事件监听器可见），则仅会出现第一个（抑制程度较小）错误。

我还将通过这种认识在下面更新我的“答案”。

更新2：我提出的新示例显示了两个错误。第一页是Bug＃1，其中包含指向跨域Bug＃2示例的链接。

Answer 1

通过document.addEventListener('touchstart', {});在IFrame中添加@Ryan L的建议，可以解决我的环境中的问题。

这样做很好，因为添加起来非常简单，并且特定于IFrame，不会影响容器页面。

问题描述：无法在运行iOS 12的iDevice（电话和平板电脑）上运行的Safari上“触摸”（选择，编辑）另一个表单字段。这仅发生在容器页面添加了一些触摸事件的iframe中的页面上。难以调试的非常模糊的条件集。

Answer 2

我相信我已经找到了解决这个令人沮丧的小错误的方法，并且像大多数错误一样，这是一个非常简单的修复方法。

需要做的就是将以下 css 应用到 iframe 中的输入。

    input:hover {
        cursor: text
    }

这是一个更新的示例：https : //codepen.io/ryanoutloud/project/full/AEKGjj

现在至于错误本身，焦点实际上是在预期的字段上，键盘上的任何条目都将被正确注册。一旦开始打字，插入符号就会跳到正确的位置。在
我发现这个问题ontouchstart=""的解决方案是，它只是去除视图插入符号完全一旦重点放在现场。