版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ming_221/article/details/82805495
问题描述
系统：ios 11
页面布局：fixed定位的弹窗，弹窗上有input输入框
现象：input元素获取焦点时光标正常，点击键盘输入之后光标会出现错位（掉下去了）
引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。
解决方案
弹窗定位由 fixed 改为 absolute
遮罩层与弹窗层平行，遮罩层仍旧是fixed定位，弹窗层改为absolute定位
<div class="mask" style="position: absolute;background-color: rgba(0,0,0,0.7)"></div>
<div class="dialog" style="position: absolute"></div>
此时弹窗层定位相对于页面整体内容的顶部，所以弹窗定位的top值要加上页面滚动的距离
var scroll = $(window).scrollTop();
此时弹窗可以出现在视窗范围内，但是会随着页面一起上下滚动。此处有两种解决方案
1. 页面滚动时实时上下移动弹窗位置，模拟fixed定位效果
window.onscroll = function(){
dialog.css('top', (scroll + 125) + 'px');
};
能解决问题，但是由于弹窗的高度调整是由页面滚动触发的，在页面滚动结束 => 弹窗到达正确位置 的这段时间内，弹窗是跟随页面滚动的，所以弹窗会“抖动”，在慢慢滚动页面时更为明显，暂时未有解决办法。
2. 弹窗出现后禁止页面滚动
$('html,body').addClass('ovf-hidden');
.ovf-hidden{
height: 100%;
overflow: hidden;
}
禁止滚动之后页面会回到顶部，需要把页面整体内容上移至用户滚动的位置
<body>
<div class="container"><!--内容--></div>
</body>
container.css('top', -scroll + 'px');
弹窗关闭后，将页面禁止滚动去掉，并把container的位移也去掉，把页面滚动回弹窗前的位置
$('html,body').removeClass('ovf-hidden');
$(window).scrollTop(Math.abs($('#app').css('top').split('px')[0]));
$('#app').css('top', 0);
ios 11 测试完美，弹窗时页面不滚动，弹窗前后页面展示的区块不变，光标也不再错位
iScroll.js
移动端弹出层滚动时禁止body滚动
原理：阻止元素默认滑动事件，用这个插件自己的滑动方式实现滑动。
还没试用
----- 2018.6.27