收藏
回答

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

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

  • 大脸MADAO
    大脸MADAO
    2018-11-22

    我开发HTML5自定义键盘也遇到相同的问题!会导致点击位置判断异常

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

      那你最后是怎么解决的呀,谢谢

      2019-05-28
      回复
  • R
    R
    06-11

    那这个到底是微信的问题还是苹果的问题呢

    06-11
    有用
    回复
  • VcnZ 🇨🇳
    VcnZ 🇨🇳
    2019-08-02

    这bug是要从微信ios版--v6.7.4 之后永久保留下去吗?

    现在都v7.0.5了,是要留着跨年吗?

    2019-08-02
    有用
    回复 1
    • Alshybi
      Alshybi
      06-03
      已经跨年了,我还在搜这个问题解决方法
      06-03
      回复
  • 🐠糖醋鱼
    🐠糖醋鱼
    2019-08-02

    顶一下留个坐标,这个问题好像就是微信端才会出现,其他平台测试了没有。

    2019-08-02
    有用
    回复
  • Birkey
    Birkey
    2019-01-30

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

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

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

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

    2019-01-30
    有用
    回复
  • 少年歪
    少年歪
    2019-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

      }

    })


    2019-01-14
    有用
    回复
  • 小高
    小高
    2019-01-02

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

    2019-01-02
    有用
    回复
  • 赖生
    赖生
    2018-12-25


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

    2018-12-25
    有用
    回复
  • Limerence
    Limerence
    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-20

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

    2018-12-20
    有用
    回复

正在加载...

登录 后发表内容