收藏
回答

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

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 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 个回答

  • 少年歪
    少年歪
    01-14

    // Vue指令,解决IOS软键盘关闭后,被撑起的页面无法回退到原来正常的位置

    Vue.directive('resetInput', {

      inserted(el) {

        // if (browser.versions.android) return

        el.__reset_input_handler = () => {

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

          // 有些手机会有延迟,再做一次

          setTimeout(() => {

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

          }, 100)

        }

        el.addEventListener('blur', el.__reset_input_handler)

      },

      unbind(el) {

        // if (browser.versions.android) return

        el.removeEventListener('blur', el.__reset_input_handler)

        delete el.__reset_input_handler

      }

    })


    01-14
    赞同
    回复
  • Birkey
    Birkey
    01-30

    也遇到这个坑了,哭啊。。。

    ios12微信H5页面里,输入框获取焦点弹起输入法,点击空白处或点击键盘的“完成”收起键盘后,页面没有下来,底部有一片灰色空白区域。。。

    然而同一个手机上,safari浏览器就没这个问题。

    看来是微信的bug吧,求解决方案,求微信老师们解决此问题

    01-30
    赞同
    回复