收藏
回答

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

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

  • 那个很帅的小白
    那个很帅的小白
    置顶回答2018-12-14

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


    2018-12-14
    赞同 11
    回复 3
    • 重庆崽儿Brand
      重庆崽儿Brand
      2018-12-22


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

      2018-12-22
      赞同
      回复
    • 总有刁民想害朕
      总有刁民想害朕
      01-21

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

      01-21
      赞同
      回复
    • 亚子
      亚子
      星期四 20:00回复重庆崽儿Brand
      请问你解决了吗?
      星期四 20:00
      赞同
      回复
    点击 登录
  • 🐟
    🐟
    2018-11-22

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

    2018-11-22
    赞同 99
    回复 3
    • 大王饶命
      大王饶命
      2018-12-10

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

      2018-12-10
      赞同
      回复
    • 时光阡陌
      时光阡陌
      02-25回复大王饶命

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

      02-25
      赞同
      回复
    • 大王饶命
      大王饶命
      02-25回复时光阡陌

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

      02-25
      赞同
      回复
    点击 登录
  • 刘晓飞🌟
    刘晓飞🌟
    2018-12-05

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

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


    2018-12-05
    赞同 66
    回复 5
    • 八爪熊
      八爪熊
      2018-12-13

      可以用

      2018-12-13
      赞同
      回复
    • 几分
      几分
      2018-12-22

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

      2018-12-22
      赞同 11
      回复
    • 刘宁
      刘宁
      2018-12-29

      可以用

      2018-12-29
      赞同
      回复
    • 宿雾
      宿雾
      05-23

      网上找了一堆的例子,最后还是这个符合我的需求,window.scrollTo(0, 0);亲测可用

      05-23
      赞同
      回复
    • yahua
      yahua
      05-28

      我现在碰到的问题是: 软键盘弹起以后,页面向上滑动,点击按钮,按钮不触发,这种要怎么解决

      05-28
      赞同
      回复
    点击 登录
  • ykl
    ykl
    2018-12-12

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

    2018-12-12
    赞同 22
    回复
  • 张鹏Ⅳ
    张鹏Ⅳ
    2018-12-26

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

    2018-12-26
    赞同 22
    回复 1
    • 富富~
      富富~
      01-14

      这个问题你解决了吗

      01-14
      赞同
      回复
    点击 登录
  • 超人不爱飞
    超人不爱飞
    01-16

    我的解决方案:

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

    if(_.isIOS()){

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

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

            setTimeout(()=>{

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

            })

        });

    }


    01-16
    赞同 22
    回复
  • 大脸MADAO
    大脸MADAO
    2018-11-22

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

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

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

      05-28
      赞同
      回复
    点击 登录
  • 几分
    几分
    2018-12-14

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

    /**
    *修改微信官方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);
    });


    2018-12-14
    赞同 11
    回复
  • Logan
    Logan
    2018-11-26

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

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

      解决了吗,谢谢


      05-28
      赞同
      回复
    点击 登录
  • 一眼云烟
    一眼云烟
    2018-11-26

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

    2018-11-26
    赞同
    回复