在移动端的 dialog 或者 popup 中提交表单或者其他需要调用软键盘的输入操作的时候,软键盘的弹起会让视窗(view port)向上滚动,在结束输入软键盘消失之后并没有把视窗滚回到原来的位置,但是渲染视图还是跟之前一样,这个时候如果点击之前的按钮或者输入框的时候,就会产生错位。

解决办法:

在表单输入结束之后,将视窗滚动到顶部(0,0)

window.scrollTo(0, 0);

其他方案:

软键盘消失之后重置 body height? 测试无效

小结:

最好不要在移动端的 fixed 区域进行表单操作,同时 fixed 区域的内容最好作为提示或者通知使用,不要将重要的交互操作放到 fixed 中。

如果有,一定要在实体机型上测试。