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的痛點在於頁面並沒有出現撐起來的效果,而且涉及的東西比較多,給了它足夠的隱藏空間。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章