最近遇到了一个移动前端的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的人就更少了,而且他们未来也会升级手机系统。