html文本框光标错位,iOS 11 中 fixed 容器中 输入框光标错位的问题处理

iOS11 之后，fixed浮层内的输入框光标会发生偏移。即 fixed 定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面。

这个问题很容易复现，只要满足以下条件即可触发此问题：

1、页面 body 高度超过视窗高度，即页面有滚动条。

2、点击页面中 fixed 定位的容器中的输入框，键盘弹起如果发生页面滚动或者键盘弹起后手动滚动页面则会出现如上面视频中光标偏移的问题。偏移量为页面滚动的距离。

目测确实是 iOS 11 新版 WebKit 引入 的 bug。目前处理的方案有两个。

一：在弹窗显示时，通过给 body 设置相关样式，使body不可滚动：

height: 100%!important;

overflow: hidden!important;

关闭弹窗后，注意要把相关样式移除。

二：在输入框blur的时候将页面滚动到顶部(起始位置)：

......

scrollTop: function(){

if(this.$fun.isIOS()){

this.scrollTimer = setTimeout(()=>{

document.body.scrollTop = 0

document.documentElement.scrollTop = 0

},10)

}

},

stopScroll: function(){

if(this.scrollTimer && this.$fun.isIOS()) clearTimeout(this.scrollTimer)

},

这个方案用在了vue项目，需要注意是input blur的时候需要做一下延迟，否则会有抖动现象，focus的时候取消定时。