ios html滑动区域偶尔不显示问题,ios输入法遮挡输入框问题,关闭输入法页面出现空白问题

ios 滑动区域不流畅 加上 -webkit-overflow-scrolling: touch;能解决,不过 -webkit-overflow-scrolling: touch;会引起滑动区域在部分ios系统偶尔不显示的问题(目前有ios11.2);ios微信浏览器中,输入框在底部,用fixed固定,调出输入法导致输入框遮挡

阅读 792
评论
    1 个回答
    Blind
    • 66

    -webkit-overflow-scrolling: touch;会引起滑动区域在部分ios系统偶尔不显示的问题:
    再加上以下两行css解决:

    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    

    输入法遮挡问题:当前解决方案,尽量不要用fixed样式,再用以下:

                 var u = navigator.userAgent;                 
                 var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                 //判断是否为ios
                 if(isIOS){
                     var ua = navigator.userAgent.toLowerCase();
                     var ver=ua.match(/cpu iphone os (.*?) like mac os/);
                     //获取ios版本
                     let vesion = ver[1].replace(/_/g,"");
                     vesion = vesion.substring(0,3)
                    // alert(vesion)
                     if(vesion!=112){
                         setTimeout(() => {
                                 //把输入框滚动到可视范围
                                  document.getElementById('ins').scrollIntoView(true);
                          },1000)
                     }
                 }

    ‘ins’为底部输入块,解决大部分苹果输入法遮挡问题,ios11.2 使用scrollIntoView(true)会起反作用,故除去,其他的还没发现。这样基本都可以实现了。测试发现输入框遮挡,绝大部分都是有第三方输入法的关系!
    还有一个问题,收起输入法页面不会收回,就是会出现一片空白的区域的问题:
    在失去焦点时调这个方法:

     setTimeout(() => {
        window.scrollTo(0, document.body.scrollTop + 1);
           document.body.scrollTop >= 1 && window.scrollTo(0,document.body.scrollTop - 1);  
        }, 200)

    图片如下:
    clipboard.png

    评论 赞赏
      撰写回答

      登录后参与交流、获取后续更新提醒