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

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

22 个回答

  • 是小白啊
    是小白啊

    1. 这是Apple在iOS的bug
    2. 会出现在所有的Xcode10打包的iOS12的设备上 3,可建议参考下这位同学的方法


    赞同 1没有帮助
    评论 2
    复制
    置顶回答2018-12-14
    • 重庆崽儿Brand
      重庆崽儿Brand


      我现在这个input框所在的页面在一个iframe页面中的,好像无法触发父级页面的window.scroll。。。还有其他方法吗

      赞同 0没有帮助
      回复
      复制
      2018-12-22
    • 总有刁民想害朕
      总有刁民想害朕

      这个问题解决了吗?跪求帮助

      赞同 0没有帮助
      回复
      复制
      01-21
    评论
  • 🐟
    🐟

    我也发现 微信IOS 6.7.4版本 搭配 IOS12版本 会有这个问题,需要滑动一下页面才能回到原来的位置

    赞同 9没有帮助
    评论 3
    复制
    2018-11-22
    • 大王饶命
      大王饶命

      确实是这样的 我把我们部门所有的IPHONE都测了一遍 发现只有IOS12并且微信版本6.7.4会这样

      赞同 0没有帮助
      回复
      复制
      2018-12-10
    • 时光阡陌
      时光阡陌
      回复大王饶命

      不会,我这有一个ios12,7.0.3的也有这个问题

      赞同 0没有帮助
      回复
      复制
      02-25
    • 大王饶命
      大王饶命
      回复时光阡陌

      是的 我当时发言的时候是6.7.4 但是没想到 现在这个版本 微信依然没有修复这个问题。

      赞同 0没有帮助
      回复
      复制
      02-25
    评论
  • 刘晓飞🌟
    刘晓飞🌟

    在点击按钮那里加下面其中一个即可解决

    //滚动到顶部
    window.scrollTo(0, 0);
    //滚动到底部
    window.scrollTo(0, document.documentElement.clientHeight);


    赞同 6没有帮助
    评论 5
    复制
    2018-12-05
    • 八爪熊
      八爪熊

      可以用

      赞同 0没有帮助
      回复
      复制
      2018-12-13
    • 几分
      几分

      可以用是可以用,但是我全线产品  好多浮动  input   怎么搞   那么多地方有   wx我是服了

      赞同 1没有帮助
      回复
      复制
      2018-12-22
    • 刘宁
      刘宁

      可以用

      赞同 0没有帮助
      回复
      复制
      2018-12-29
    • 展示更多
    评论
  • 超人不爱飞
    超人不爱飞

    我的解决方案:

    //解决IOS12并且微信版本6.7.4页面,键盘弹出bug

    if(_.isIOS()){

        window.addEventListener('focusout', function () {

              //软键盘收起的事件处理

            setTimeout(()=>{

                window.scrollTo(0 ,document.documentElement.scrollTop || document.body.scrollTop);

            })

        });

    }


    赞同 2没有帮助
    评论 0
    复制
    01-16
  • 张鹏Ⅳ
    张鹏Ⅳ

    现在我的页面是有input输入框和选择表情的功能,,input倒是可以搞定,但选择表情时,使用blur将键盘弹回,这时再使用scrollTop=0,会有一个很明显的弹回的操作,体验很差啊

    赞同 2没有帮助
    评论 1
    复制
    2018-12-26
    • 富富~
      富富~

      这个问题你解决了吗

      赞同 0没有帮助
      回复
      复制
      01-14
    评论
  • ykl
    ykl

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

    赞同 2没有帮助
    评论 0
    复制
    2018-12-12
  • 几分
    几分

    好烦啊    现在全线都是这样   赶紧解决呀

    /**
    *修改微信官方bug iOS 12 bug for keyboard dismissing, view not restored ಠ_ಠ
    */
    jQuery(document).delegate('input, textarea', 'blur', function(){
    setTimeout(function(){
    // did not work for me straight away without a small timeout ಠ_ಠ
       jQuery('html').animate({height: '100.1vh'}, 100, function(){
    // did not work for me with just one instruction with 100vh  ಠ_ಠ
         // the easing smooth doesn't work all the time properly ಠ_ಠ
         jQuery(this).animate({height: '100vh'}, 1);
       });
     },10);
    });


    赞同 1没有帮助
    评论 0
    复制
    2018-12-14
  • 大脸MADAO
    大脸MADAO

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

    赞同 1没有帮助
    评论 1
    复制
    2018-11-22
    • yahua
      yahua

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

      赞同 0没有帮助
      回复
      复制
      05-28
    评论
  • Birkey
    Birkey

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

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

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

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

    赞同 0没有帮助
    评论 0
    复制
    01-30
  • 少年歪
    少年歪

    // 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

      }

    })


    赞同 0没有帮助
    评论 0
    复制
    01-14