iOS 11 中模态输入元素的光标偏移量

昨天我更新到ios 11.3，游标不再有问题，之前是在ios 11之前的版本上。

现在有一些修复可以稍微改善这种情况，但仍然没有成熟的工作版本。

例如，这里提供了这样的方法： https ://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

可能的解决方案：

1.设置body标签的固定位置

打开模态窗口时，我们position: fixed为标签添加样式body，关闭后，我们将其删除。但是，如果模态窗口不是在页面的最顶部打开的，当它关闭时，页面会向上移动（您可以通过在打开时保存它并在关闭时设置滚动位置来修复它）。

缺点：

• 关闭模态窗口时，出现地址栏和选项卡式面板，很烦人（由于JS滚动定位引起的）。
• 强偏移被移除，但模态窗口底部的输入元素仍然有轻微的光标偏移（在这种情况下，用户可以工作，但在视觉上它看起来不是最愉快的方式）。

2. 将模态窗口的显示从位置：固定切换到绝对。

模态窗口被分配一个属性position: absolute，尺寸和偏移量是在创建时计算的。这种方法从根本上消除了光标偏移问题，但有许多令人讨厌的伪影。

缺点：

• 在装有 iOS 的智能手机上，当键盘打开时，屏幕会移动到输入元素的中心，这会禁用滚动锁定，并且深色覆盖不会完全覆盖屏幕区域。
• 在许多移动设备上，即使正确计算了屏幕高度，底部的亮条也不会被深色覆盖层覆盖。

3.将所有模态窗口翻译成单独的页面

这种方法更激进，因为 意味着对 modals 中使用的所有代码的 iOS 完全重写，但我认为这是解决问题的最完整的解决方案。

缺点：

• 有必要在 iOS 11 上完全删除模态窗口并将其内容转换为常规页面