记最近两次微信webview bug

[liyatang]

键盘回弹，页面不回弹

https://developers.weixin.qq.com/community/develop/doc/00080c60510038c78ae76d20951c00?highLine=%25E9%2594%25AE%25E7%259B%2598%25E5%2585%25B3%25E9%2597%25AD

https://developers.weixin.qq.com/community/develop/doc/000480392787f052a2b7d022f51c00?highLine=%25E9%2594%25AE%25E7%259B%2598%25E5%2585%25B3%25E9%2597%25AD

需要滚一下才能回到位置

如果用js模拟滚一下成本太高，找到滚动的位置滚一下耦合比较重

最后解决方法是

// 修复 ios 微信内键盘弹回页面没弹回bug，6.7.4 之上都有
// 通过增加页面搞定，然后复原来 hack
function fixWeiXinKeyboard () {
  if (is.iOS() && is.weixin()) {
    window.document.body.addEventListener('focusout', (e) => {
      if (e.target.tagName.toLocaleLowerCase() === 'input') {
        // 小于 100 不行，100.01 不行，100.1 行
        window.document.body.style.height = '100.1%'
        setTimeout(() => {
          window.document.body.style.height = ''
        }, 1)
      }
    })
  }
}

动画影响渲染

最近给移动端项目添加了动画，结果上线就。概率性出现在小米8上，而且同事的小米8也出现了，测试了其他andriod和iOS手机没有复现，奇了怪了

此浮层的动画代码是

@-webkit-keyframes slide-in-bottom {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: none;
  }
}

中间经过很多排查和探索，最终锁定在动画css上，改成这样就好了

@-webkit-keyframes slide-in-bottom {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

蛤~~