苹果手机iOS11中fixed弹出框中input光标错位问题

最近遇到了一个移动前端的BUG：手机弹出框中的输入框focus时光标可能会错位。

刚开始时我完全不知道错误原因是什么，在电脑上调试时完全没有问题，手机上出现问题时也没有找到规律。后来在网上搜索了大量的资料，终于在几篇中文文章中找到了问题的大致方向在于"fixed定位的弹出框在苹果手机系统中有问题”，但是并没有很好的解决方法，解释的bug原因也个有千秋。最后，我谷歌了“fixed input cursor"之类的关键词，终于找到了一篇英文的详细解答（文章链接），并且我也验证了其中的正确性。接下来，我就写写我得到的有用信息和自己的体会，不是直接翻译。

 

BUG

如果你选中一个在fixed定位的container中的input，此时会跳出键盘，如果你的input在比较下面的位置，你就不得不滚动界面，此时你就会发现光标错位，而且滚动越多，错位越厉害。

没有完美的解决方法，首先把IOS升级到11.3吧

该BUG存在于IOS系统的版本11.0至11.2X（10或者更早以前应该是没有这个BUG的，至于具体是哪个版本时出现的BUG我也不清楚，因为我很久才更新一次系统，前面提到的文章中也没有明确指出），IOS最新版本11.3已修复此BUG。我尝试过一个安卓系统的手机，没有这个BUG。我的手机几个月前是没有出现这个BUG的，后来升级过一次手机系统到11.26就发现了这个BUG，不幸的是我们公司的人大多用的苹果手机且手机系统都是11.XX于是都有这个BUG，导致我有大概一个月的时间完全没有联想到是手机系统导致的BUG。最后，我将手机升级到最新版本11.3之后，这个BUG真的不存在了！（然后我就去劝公司其他人升级手机系统）

以下有我查到的几种别的方法及我的一些见解：

1. 基本上所有文章都指出解决方法就是将 position: fixed; 变成 position: absolute; ，但是这样的话在电脑大屏幕上弹出框就不在固定位置会显得不像弹出框（或者检测屏幕宽度和高来定义是否是手机界面？）；

2. 放弃使用弹出框，但是此方法可能会导致巨大的工作量以及不美观；

3. 当弹出框出现时，全屏显示，并且将其余部分用 display: none; 隐藏。这个方法的工作量可能也会很大，我们公司平台用了很多弹出框，如果要这么做的话成本太大，不过我前面提到的那篇文章的作者说他采取了这个方法并且可行。

当然，你的客户可能在用有此BUG的系统，你也不能迫使他们升级

目前我们公司的做法是将这个问题放在一边了，就我而言，我们的客户中用苹果手机的不多（客户大部分是生活在巴黎的人，感觉用华为的人好像更多），而系统恰好在11.0-11.2X的人就更少了，而且他们未来也会升级手机系统。