收藏
回答

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

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 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  (未经腾讯允许,不得转载)
收藏关注问题回答
邀请回答

37 个回答

  • Aleio จุ๊บ
    Aleio จุ๊บ
    2018-11-26

    我也遇到

    2018-11-26
    赞同
    回复
  • ab
    ab
    2018-11-30

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

    2018-11-30
    赞同
    回复 1
    • yahua
      yahua
      05-28

      想问下,解决了吗,谢谢

      05-28
      赞同
      回复
    点击 登录
  • D:
    D:
    2018-11-30

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

    2018-11-30
    赞同
    回复
  • Lei
    Lei
    2018-12-01

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

    2018-12-01
    赞同
    回复
  • 银色子弹
    银色子弹
    2018-12-04

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

    document.body.scrollTop = 0;

    2018-12-04
    赞同
    回复
  • xiaocui
    xiaocui
    2018-12-05

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

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

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

    2018-12-05
    赞同
    回复
  • 冯肖肖
    冯肖肖
    2018-12-20

    同样遇到了这个问题,利用网上提供的解决方案, 设置position为fixed之后,确实表单元素会发生错位,大家有什么好的解决方案吗?

    2018-12-20
    赞同
    回复
  • 努力努力再努力
    努力努力再努力
    2018-12-20

    //解决IOS12并且微信版本6.7.4页面bug

        $("input,select").blur(function(){

            setTimeout(() => {

            const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;

            window.scrollTo(0, Math.max(scrollHeight - 1, 0));

            }, 100);

        })



    借鉴于:http://www.cnblogs.com/Miracle-ZLZ/p/10030608.html

    2018-12-20
    赞同
    回复
  • 赖生
    赖生
    2018-12-25


    发现iPhone6/6s 公众号H5端input团键盘弹出把页面顶上去后,关闭软键盘不回弹了,底部多出一截区域,望快解决啊。

    2018-12-25
    赞同
    回复
  • 小高
    小高
    01-02

    这个问题,哪个版本修复?7.0.1 版本也复现了

    01-02
    赞同
    回复