這兩天幫某個項目處理後事,本覺得能夠輕鬆搞定,不成想又發現了一個bug..... html
背景描述:ios5 提出了支持 position:fixed ,因而乎你們以爲讓浮動的圖層固定在屏幕最下方容易多了,趕忙用上吧。但是呢。。。頁面上又有好多地方須要用到 scrollTo 控制滾動條移動,尤爲是頁面剛加載完畢須要讓瀏覽器默認的 url 欄消失,通常都用 scrollTo(0,0) 或 scrollTo(0,1) 之類的。。。當這二者混合時就出現問題了, 浮動的div 雖然是你看到的在最下方,可是實際上這個div 內的觸控點全都漂移了。 ios
(畫外音:經過這件事情,咱們明白了一個道理:不能只相信你的眼睛....) 瀏覽器
用 iphone 訪問地址:http://ztree.me/issueTest/iosFixed.html (注意,此 bug 在 iphone5上不存在!應該是 ios6 系統修正了這個bug。) iphone
你就能夠重現上圖的問題,看觸屏的位置,那裏沒有任何內容,可是點擊後會看到灰色陰影,點擊後 alert 44,這說明 click 44 這個 li 的位置實際上漂移到了那裏。 測試
bug 描述:經過這個 Demo 能夠基本肯定 bug 的緣由——利用 scrollTo 滾屏時,會致使 position:fixed 的圖層視圖不變,但對應的 DOM 實際響應位置卻跟隨 滾動條一塊兒移動了,並未進行 fixed 的修正,從而致使了這個bug 的產生。 url
解決方案:通過簡單測試發現,出現這種 bug 後,只須要用手移動一下屏幕就沒問題了,因此嘗試在 執行了 scrollTo 後,馬上改變 body 的高度,哪怕是1個像素也可,而後這個世界就清淨了!! spa
不過記住了,要利用 setTimeout !想看源碼,直接右鍵看演示頁面的源碼吧! htm
最後,若是你有更好的方法處理這個問題 或 發現個人測試出現了失誤,也但願趕忙告訴我..... ip