先說一下業務場景。
界面有彈窗，在彈窗內輸入時，彈出軟鍵盤輸入短信驗證碼。驗證成功後隱藏彈窗，彈出有複製按鈕的彈窗。點擊複製按鈕，複製相關內容。
在開發這個功能的時候，有兩個渠道，一個是支付寶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的痛點在於頁面並沒有出現撐起來的效果，而且涉及的東西比較多，給了它足夠的隱藏空間。