iPhone X 弹出输入框隐藏后页面上移不回位问题的解决办法

现象:简单的说就是iPhoneX页面里有输入框时,点击输入框,无论是否输入内容,点击输入框的完成或者页面其他地方隐藏输入框后,发现页面被整体顶上去了,而输入框的部分要么成黑色要么白色等,页面底部变成了输入框的顶部位置

 

解决办法:

方法1:

这个问题是ios12的bug,包括在其他app的webview里,只要ios12平台,app由xcode10构建,就会出现,不限于苹果x和xs,解决代码

  $('input').on('blur', this, (ev) => {
       windows.scrollTo(0,0)
});
 

但是对我的页面没有效果。。。于是找到方法2

方法2:

$('input').on('blur', function() {
    var count = 0;
    var screenHeight = window.screen.height;
    var blurInterval = setInterval(function () {
        $('body').css('min-height', (screenHeight-=10)+'px');
        if (count >= 10) {
            clearInterval(blurInterval);
            $('body').css('min-height', '');
        }
        count++;
    }, 10)
})

完美解决!  这次做活动好几个iPhone bug,iphone 10.3.3版本竟然不兼容flex布局,也是醉了。

posted @ 2019-08-02 11:05 卢沟晓月 阅读(...) 评论(...) 编辑 收藏