一文完全解决iOS中键盘回落后留白问题

最近作的一个H5刚开开心心提测就被QA一顿怼😭，当input输入完成后页面简直卡成翔💩，当我接过手机亲自测试时慌的一批😢，顿时开始怀疑人生😏，立刻开始进入紧张的排查中😊，通过两天不断的调试优化😂，最终完美解决全部问题❤️，此文能够完全解决iOS的H5页面卡顿以及键盘回落后留白问题😄。

1.定位问题

当QA和我反映页面卡顿只在iOS上出现时，第一反应确定不是代码的问题，我也很纳闷iOS性能广泛要比android高啊，为啥会出现这么严重的卡顿，有点慌啊。因而开始了一次惊心动魄的前端性能优化之旅,在Google大概的看了几篇文章，感受到应该是我在页面加了大量的动画形成了页面重排（reflow）致使的，初步定位问题是重排形成的😄

2.解决卡顿

把问题定位为重排形成的，因而就开始针对性的排查容易形成重排的隐患，发现有动画的元素都是absolute的，应该问题不大。最后给最外层的元素前后增长了如下属性：

.wrap {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
复制代码

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit)发挥功能，从而提高性能,若是要充分发挥浏览器的性能时，慎用will-change: transform;至于为何请看CSS will-change 属性;排查了一番该定位的定位，反正要避免掉重排的坑，再加上开启了硬件加速因而就快速验证了一下，发现页面开始顺畅了起来，可是依旧有空白，经验证是input键盘收起后页面不进行绘制出现的空白，因而换了思路从新开始Google关于iOS页面input空白的问题，果真发现了新大陆，这是iOS12的大坑，在网上看了不少文章不断的试错，最终找到了一个比较稳妥的方法。

3.解决空白

在input上分别增长focus和blur的方法，基本能够解决键盘回落后留白问题；

handleFocus(event) {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
}
handleblur() {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'end',
            behavior: 'smooth'
        });
    }, 300);
}
复制代码

至此觉得万事大吉了，没想到QA说iOS还会偶尔性的出现留白问题，我也是没脾气了，也许没有解决掉根源问题，只是暂时提升了页面的性能而已，再次开始了探索之旅，发现须要在input失去焦点时让页面的scrollTop为0便可正常回落，因而增长了如下代码：

handleblur() {
    let e = event.currentTarget;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'start',
            behavior: 'smooth'
        });
    }, 300);
    window.scrollTo(0, 0);
}复制代码

就这样过了一天QA再也没有反馈过，感受一会儿轻松了许多，尚未轻松多久，QA又报了有个页面中有两个input进行填写时会弹跳形成的体验很是很差，我一看体验太差了，因而又开始了优化弹跳之旅。。。

4.优化弹跳

此次的定位很明确，就是失焦时的scrollTop=0形成的页面弹跳。原本iOS是作了这方面的优化，在软键盘弹出和收起时页面会smooth的平滑，因为我加了scrollIntoView破坏了原生的优化致使弹跳了。不断的google，尝试了不少种方法都无果，最后无奈之下只好向技术群的小伙伴求助，果真有高手，提供了下他以前作的思路，我一试果真了得，定时器大法终于派上用场了，如下是最终代码：

handleFocus(event) {
    clearTimeout(this.timer);
}
handleblur() {
    this.timer = setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
}
复制代码

至此终于完美解决了遇到的全部问题，QA也漏出了会心的微信😊两天下来脑细胞死了很多，今天分享出来，以后的同行能够一步到位，少走弯路了😄

总结

1. 写页面时避免掉形成重排的隐患；
2. 必要时谨慎开启硬件加速；
3. 精准定位问题，分析问题，收集问题；
4. 善于提问能够少走不少弯路；

给你们推荐一个优秀的iOS交流平台，平台里的伙伴们都是很是优秀的iOS开发人员，咱们专一于技术的分享与技巧的交流，你们能够在平台上讨论技术，交流学习。欢迎你们的加入（想要进入的可加小编QQ）。 1390842748

做者：天道酬勤Lewis连接：https://juejin.im/post/5cff9601f265da1bc5525aae来源：掘金