收藏
回答

微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS IOS 12.1 iPhone XS 6.7.4

- 当前 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


最后一次编辑于  2018-11-21
回答关注问题邀请回答
收藏

28 个回答

  • xiaocui
    xiaocui
    2018-12-05

    这个是只要弹出软键盘,底部就会出现空白。不过结合fixed时,甚至浮动层点击区域也会错位。

    目前我是针对ios通过监听input,select,textarea获取焦事件时在body底部添加一个带高度的空div,失去焦点时就将这个div删除。表面上不会再出现空白,(感觉是因为dom重绘导致了webview也发生了啥),但是总觉得不是很保险,有小伙伴有其它方法解决吗?

    这样子对那些没问题的版本也有点坑坑的...

    2018-12-05
    有用
    回复
  • 银色子弹
    银色子弹
    2018-12-04

    在input失去焦点的时候 用代码控制页面滑动一下可以修复此问题

    document.body.scrollTop = 0;

    2018-12-04
    有用
    回复
  • LZ
    LZ
    2018-12-01

    现在有没有什么好的解决方案可以兼容这个问题

    2018-12-01
    有用
    回复
  • D:
    D:
    2018-11-30

    微信升级后的发现同样的问题!!!我IOS12 微信6.7.3测试OK 然后更新6.7.4 就出现这个问题了。外层写fixed, 空白不会出现,但是表单元素会错位。有解决方案吗?!

    2018-11-30
    有用
    回复
  • Ab
    Ab
    2018-11-30

    一样遇到,打开软键盘后,页面的按钮响应区域与视觉上错位

    2018-11-30
    有用
    回复 1
    • yahua
      yahua
      2019-05-28

      想问下,解决了吗,谢谢

      2019-05-28
      回复
  • Aleio
    Aleio
    2018-11-26

    我也遇到

    2018-11-26
    有用
    回复
  • 一眼云烟
    一眼云烟
    2018-11-26

    顶一下,我也遇到这个问题,好像6.7.4如果弹出的软键盘遮挡了输入框的话,页面会整体上移漏出输入框,但是输入结束后,上移的页面没有自行恢复

    2018-11-26
    有用
    回复
  • Logan
    Logan
    2018-11-26

    我也遇到了同样的问题,微信打开网页,<input /> <textarea/>获取焦点或者<select></select>标签获取焦点弹起键盘时页面被顶起,点击确定页面没有回到原先的位置,导致视图和触控区域错位。

    2018-11-26
    有用
    回复 1
    • yahua
      yahua
      2019-05-28

      解决了吗,谢谢


      2019-05-28
      回复

正在加载...

登录 后发表内容