收藏
回答

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

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

  • 是小白啊
    是小白啊
    置顶回答2018-12-14

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


    2018-12-14
    有用 1
    回复 4
    • game
      game
      2018-12-22


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

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

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

      2019-01-21
      回复
    • 亚子
      亚子
      2019-07-11回复game
      请问你解决了吗?
      2019-07-11
      回复
    • Mount
      Mount
      2020-09-04回复game
      如果你的页面在iframe里那你需要调用父窗口的window对象
      2020-09-04
      回复
  • 刘晓飞
    刘晓飞
    2018-12-05

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

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


    2018-12-05
    有用 9
    回复 8
    • 八爪熊
      八爪熊
      2018-12-13

      可以用

      2018-12-13
      回复
    • J.
      J.
      2018-12-22

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

      2018-12-22
      2
      回复
    • 刘宁
      刘宁
      2018-12-29

      可以用

      2018-12-29
      回复
    • 宿雾
      宿雾
      2019-05-23

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

      2019-05-23
      回复
    • yahua
      yahua
      2019-05-28

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

      2019-05-28
      回复
    查看更多(3)
  • 🐟
    🐟
    2018-11-22

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

    2018-11-22
    有用 9
    回复 3
    • 主治医生
      主治医生
      2018-12-10

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

      2018-12-10
      回复
    • 时光阡陌
      时光阡陌
      2019-02-25回复主治医生

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

      2019-02-25
      回复
    • 主治医生
      主治医生
      2019-02-25回复时光阡陌

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

      2019-02-25
      回复
  • 超人不爱飞
    超人不爱飞
    2019-01-16

    我的解决方案:

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

    if(_.isIOS()){

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

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

            setTimeout(()=>{

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

            })

        });

    }


    2019-01-16
    有用 5
    回复 2
    • 很复杂😏
      很复杂😏
      2019-08-23
      _是啥?未定义
      2019-08-23
      回复
    • 子咻
      子咻
      2019-11-13
      整个方案棒
      2019-11-13
      回复
  • xslau
    xslau
    2019-08-15

    这个锅其实是苹果官方的,同样的网页在iOS的QQ里面也有同样的问题,只是苹果官方还是没解决,浏览器就不会出现这个问题。

    解决代码:

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


    2019-08-15
    有用 2
    回复
  • 张鹏Ⅳ
    张鹏Ⅳ
    2018-12-26

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

    2018-12-26
    有用 2
    回复 1
    • 2019-01-14

      这个问题你解决了吗

      2019-01-14
      回复
  • ykl
    ykl
    2018-12-12

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

    2018-12-12
    有用 2
    回复
  • 惜阳
    惜阳
    2019-11-11

    我加上去一点用也没有啊  android都出现了

    2019-11-11
    有用 1
    回复
  • A001智工云~黄思清
    A001智工云~黄思清
    2019-10-16
    <script>
    $(document).delegate('input, textarea', 'blur', function(){
    window.scrollTo(0, 0);
    });
    </script>

    亲测可用,只能如此了,基本一个页面不会有太多的输入数据

    2019-10-16
    有用 1
    回复
  • J.
    J.
    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
    有用 1
    回复

正在加载...

登录 后发表内容