问题描述
系统: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.