ios iframe下input聚焦焦点 软键盘点击后位置偏移

唠叨问题:iOS10.3.1推出更新后,ios app下某页面出现了一个bug,input输入内容后,软件盘点击删除键会出现input的盒模型位置偏移;

猜测1:这个页面用了iframe嵌套,主页面嵌套了一个iframe,iframe里又嵌套里一个iframe,可能和iframe有关,比如高度;

解决1:页面加载完,尝试js修改iframe和外层div添加css:{height: 实际获取高度px},问题未解决;

猜测2:在多次尝试复现下,觉得input聚焦位置偏移和iframe内盒模型渲染不及时有关,想着能不能即时刷新css渲染;

解决2:想着聚焦时设置body字体颜色属性修改,问题未解决;

猜测3:继续复现体验,觉得和页面滚动有关,滚动后页面盒模型会发生变动,google搜到这片文章Issues with position fixed & scrolling on iOS,问题确认:Focus jumping&&Scrolling == unusable position:fixed element;

解决3:iframe外层div使用了fixed,input聚焦时修改fixed为absolute,并 display:none 隐藏iframe下的主页面,防止出现多余的滚动过程,问题可解决;

唠叨总结:最终尝试发现只需input聚焦时隐藏iframe下的主页面,操作结束时恢复展示主页面即可,无需修改fixed为absolute。其实目的是推荐这篇文章链接Issues with position fixed & scrolling on iOS,问题和解决方法都在里面。

参考文献: https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios