- 当前 Bug 的表现(可附上截图)
微信打开网页;
微信IOS 6.7.4 键盘弹起页面上滑,键盘收起页面不会回到原位置,导致弹框(css设置position为fixed会有问题,absolute不会有问题)后按钮响应区域错位。
(如图:键盘收起,页面没有回到原来的位置)
- 预期表现
点击区域正常响应
- 复现路径
1、打开网页:https://img.zai-art.com/web/app/demo/weixin.html
2、输入框光标聚焦,键盘弹出
3、收起键盘,点击 “弹框” 按钮
4、点击弹框中的 “点我” 按钮 (正常响应弹框会消失)
- 提供一个最简复现 Demo
源代码
https://haodaking.github.io/demos/wechat/weixin.html
预览
https://img.zai-art.com/web/app/demo/weixin.html
这个是只要弹出软键盘,底部就会出现空白。不过结合fixed时,甚至浮动层点击区域也会错位。
目前我是针对ios通过监听input,select,textarea获取焦事件时在body底部添加一个带高度的空div,失去焦点时就将这个div删除。表面上不会再出现空白,(感觉是因为dom重绘导致了webview也发生了啥),但是总觉得不是很保险,有小伙伴有其它方法解决吗?
这样子对那些没问题的版本也有点坑坑的...
在input失去焦点的时候 用代码控制页面滑动一下可以修复此问题
document.body.scrollTop = 0;
现在有没有什么好的解决方案可以兼容这个问题
微信升级后的发现同样的问题!!!我IOS12 微信6.7.3测试OK 然后更新6.7.4 就出现这个问题了。外层写fixed, 空白不会出现,但是表单元素会错位。有解决方案吗?!
一样遇到,打开软键盘后,页面的按钮响应区域与视觉上错位
想问下,解决了吗,谢谢
我也遇到
顶一下,我也遇到这个问题,好像6.7.4如果弹出的软键盘遮挡了输入框的话,页面会整体上移漏出输入框,但是输入结束后,上移的页面没有自行恢复
我也遇到了同样的问题,微信打开网页,<input /> <textarea/>获取焦点或者<select></select>标签获取焦点弹起键盘时页面被顶起,点击确定页面没有回到原先的位置,导致视图和触控区域错位。
解决了吗,谢谢