運(yùn)用webkit繪制渲染頁(yè)面原因解決iscroll4閃動(dòng)的問(wèn)題
Posted on 2012-09-21 12:24 ∪∩BUG 閱讀(643) 評(píng)論(0) 編輯 收藏
已經(jīng)有不少前端同行抱怨iScroll4的各種問(wèn)題,我個(gè)人并不贊同將這些問(wèn)題歸咎于iScroll4,因?yàn)閕Scroll4進(jìn)無(wú)論是touch事件的捕獲,還是使用transform來(lái)處理滾動(dòng),以及將cubic-bezier應(yīng)用到transition上實(shí)現(xiàn)高效的平滑滾動(dòng),這些原理我們都是已知的。更多原理細(xì)節(jié)可以參看[譯]手把手教你編寫iOS上Mobile Web App實(shí)現(xiàn)Fixed Position和模擬滾動(dòng) 一文。此文則來(lái)解釋另一個(gè)被很多人誤解為iScroll4 造成的問(wèn)題,那就是內(nèi)容多的頁(yè)面閃動(dòng)的問(wèn)題。現(xiàn)象表現(xiàn)為:
1.滑動(dòng)過(guò)程中,滾動(dòng)區(qū)內(nèi)的元素在釋放手指時(shí)出現(xiàn)細(xì)微閃動(dòng)
2.圖片縮放過(guò)程中釋放手指時(shí)明顯閃動(dòng)
3.iOS上從mobile safari打開(kāi)或第三方應(yīng)用內(nèi)打開(kāi)后,切回主屏幕再切回頁(yè)面時(shí)明顯閃動(dòng)
4.頁(yè)面初始時(shí)閃動(dòng)
大致這些情況下會(huì)有閃動(dòng),在ipad2,new ipad上會(huì)明顯看得出。
下面就來(lái)分析產(chǎn)生的原因和解決辦法: