ios微信软键盘之殇

先说一下业务场景。

界面有弹窗，在弹窗内输入时，弹出软键盘输入短信验证码。验证成功后隐藏弹窗，弹出有复制按钮的弹窗。点击复制按钮，复制相关内容。

在开发这个功能的时候，有两个渠道，一个是支付宝h5,一个是微信h5。结果是微信IOS端出现了bug，弹出有复制按钮的弹窗后，点击复制按钮没有任何反应。

于是，我这个比较直的人就一直点，点点点，并且进行了计数，一开始，发现大概点了有一分钟后，界面没有卡了，点击复制按钮成功复制到了内容。我首先想到的是复制插件是不是有问题，查看了复制插件的源码，发现复制插件并没有设置什么时间，其他用到复制插件的地方也没有同样的问题，所以，排除是复制插件的问题。

由于卡顿时间的考虑吧。我想到了是不是哪些地方有setTimeout，setInterval的定时器导致卡顿，刚好也发现有个地方设置了时间定时器，并且在用不到这个时间定时器的时候没有清除时间定时器。于是，在用不到时间定时器的时候将这个定时器给取消了。但是，取消后，bug并没有消失。。。但是，经过多次测试，好像页面卡顿的时间缩小了！于是，找到了发短信验证码的时候，有个倒计时，当短信验证码验证成功的时候，这个倒计时没有取消，还在继续倒计时，于是，在验证成功的时候，取消了倒计时，然鹅，bug依旧存在。。。判定并不是时间定时器，以及计时器的原因导致。。。路漫漫其修远兮啊。。。

由于这里动画比较多，于是考虑是不是动画太多导致卡住了。又是网上一通搜索。什么ios微信animation卡顿掉帧，h5动画卡顿优化，还想到了是不是tranform过渡动画过快，导致卡顿。最后都不能找到任何相关的蛛丝马迹。。。。所以，这个想法也暂时排除，并且,复制按钮的时候所有动画也都结束了，应该排除这个想法。

又想是不是z-index的问题，复制按钮的弹窗z-index过低导致，于是设置一个极其大的z-index,这个想法也宣告失败。。。

好吧，这到底是个什么样的bug？我太南了。。。

痛定思痛，我回想了一遍流程。弹窗=>输入验证码=>隐藏验证码弹窗=>弹出复制按钮弹窗。突然，灵光一闪，输入验证码的时候需要弹出软键盘，ios的软键盘一直以来有个顽固的bug!H5 ios软键盘弹出后会导致撑起页面不下来！虽然这里并没有看到页面被撑起来的迹象，我之前解决过一次这样的bug，我只是抱着一试的想法，先将弹出软键盘的流程给去掉，直接弹窗=>隐藏验证码弹窗=>弹出复制按钮弹窗。在这个流程下，复制按钮并没有卡顿！离成功仅一步之遥！确认过眼神，这就是ios软键盘的锅！天呐，太坑爹了！于是，在验证完短信验证码的时候设置了window.scrollTo(0, 0);bug消失，天下太平。。。

最后的最后，终于解决了。。。。

总结一下，这个bug的痛点在于页面并没有出现撑起来的效果，而且涉及的东西比较多，给了它足够的隐藏空间。