ios的微信浏览器输入框失去焦点后页面不能回弹

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yanzhi_2016/article/details/84942569

问题：注册页面，输入完手机号和注册密码，点击获取验证码，图片验证码弹窗弹出，一切进行的都很完美。然而在ios微信浏览器里面，无论点击哪里，弹出层毫无响应。

开始排查问题：

• 首先排除不是z-index导致元素点不到，进而无法触发点击事件。

• 因为使用vue框架，所以给click事件加上一个native修饰符，然而仍然毫无响应。

• 然后再排除不是因为css导致无法触发点击事件。

• 直到滑一下页面，才能正常响应点击事件。

一番搜索尝试之后，仍然不知道为什么会出现这个bug，最后认为可能是微信浏览器在ios系统里面的特殊表现，所以还是选择滑动页面来解决问题。

使用js滑动页面应该不是什么问题，可以使用document.body.scrollTop或者window.scrollTo()来控制页面滑动。

最后我选择在输入框失去焦点时，使用window.scrollTop来滑动页面。

代码如下

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

写完之后，自测发现时灵时不灵，怎么办？加setTimeout。

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

再测，发现完美解决问题。

然而为什么这么解决，却是一脸懵。。。