fixed定位 input在IOS设备上光标位置异常问题

页面是个长页面，点击页面不同部分，会弹出弹窗，如果用absolute定位，那么弹窗的位置就难以定位，因而决定采用fixed定位，此时在IOS 11.2.x 系统中就 会出现点击input光标位置异常的问题。

异常如图所示：

原因分析

input的父元素是采用fixed定位的元素，此时input输入框在IOS系统存在bug，input元素获得焦点，吊起键盘的时候，页面上fixed定位的元素会被上推，但是光标却留在了原地，造成错位的现象。

解决方案

当点击激活弹窗按钮的时候，给body设置fixed定位，让其也脱离标准流文档，关闭弹窗的时候，让其恢复relative定位。
代码示意：

body {
	position: relative;
}

body.fixed {
	position: fixed;
	width: 100%
}

//打开弹窗
openBtn.tap(function(){
	$('body').addClass('fixed')
})

//关闭弹窗
closeBtn.tap(function() {
	$('body').removeClass('fixed')
})

这里会存在一个小小的问题，就是弹框弹出后，初次点击一次input框的时候，会弹出键盘，能正常输入，但是光标不显示，如果点击两次input输入框，就会显示光标。

弹出了键盘，能输入，但是光标不显示：

再次点击，就一切正常：

---

---

后来咨询了一些前端童鞋，很多是采用这种方式，点击一次光标不显示的问题，系系统BUG，后续IOS版本，苹果已经修复该BUG。

目前采用以上方式，如果发现有更好的方式，会后续更新。

---

---