微信ios端6.7.4版本发现又一重大bug！
发布于 5 年前 作者 qiangding 16657 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）
  • 预期表现
  • 复现路径

用iphone手机在微信6.7.4版本上随便进一个有表单的h5页面试一下就可以复现

7 回复

应该是进入有 web-view 组件后拉起系统键盘或 picker 消失后会导致页面 contentSize 有变化，需要用户主动滚动页面才能恢复。

这个是微信 6.7.4 使用 XCode10 打包后引入的系统 bug，我们会在 6.7.5 版本上线兼容逻辑，规避大部分有问题的情况。这个 bug 已经提交到苹果那边了，看他们何时会发布系统修复版本吧。

这个应该算是苹果系统的一个bug，当键盘收起后不会自动重绘body，需要手动滑动一下才能恢复正常。前端可以使用document.body.scrollIntoView()来解决。这里是scrollIntoView()的详细介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView具体代码块如下：

// ios键盘弹起收回body不会重绘

(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {

  ['input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false)

}, true);

可以全局监听一下 focusout 事件，毕竟不可能每个 input 里面都写一次 blur 监听，这对于以后的维护也不是很友好，而 focusout 与 blur 的不同之处是 focusout 可以冒泡。但是如果你的页面里有弹窗，那么你可能需要 setTimeout 一下。哦！页面卸载的时候记得移除监听。

function fixScrollTop () {
  setTimeout(() => {
    document.body.scrollTop = document.body.scrollHeight
  }, 100)

}


window.addEventListener('focusout', fixScrollTop)

上午解决的。

判断下iOS设备。执行下面代码，用的事件委托，每次输入框或者下拉框离开焦点时，触发一下页面重绘

inputBlur () {
  let $view = document.querySelector('.yd-scrollview');
  if (!$view) return;
  $view.setAttribute('tabIndex', 1);
  $view.addEventListener('blur', function (e) {
    if (['INPUT', 'SELECT'].indexOf(e.target.tagName) > -1) {
      document.body && (document.body.scrollTop = document.body.scrollTop);
    }
  }, true);
},

虽然 blur 并不能冒泡，但addEventListener第三个参数设置为true即可。

如果是jQuery，那事件委托就更简单了

这个问题在iOS13下 又出现了，之前设置过滚动也不行。。

是键盘收起后页面无法自动复位？

$(document).ready(function(){
    (function(){
        let scroll_top = 0;
        let input_focus=false;
        $(document).on("focus","input,select,textarea",()=>{
            input_focus=true;
            scroll_top = $(document).scrollTop();
        });
        $(document).on("blur","input,select,textarea",()=>{
            input_focus=false;
            setTimeout(function(){
                if(!input_focus){
                    $(document).scrollTop(scroll_top);
                }
            },100);
        });
    }());
});
回到顶部