Chrome渲染Transition時頁面閃動Bug

前段時間，有同事和會員反饋使用Chrome訪問淘寶首頁會出現畫面閃動的現象，可是我在Mac和Win下面的Chrome都沒法重現這個問題，後來重裝了一遍Win7下的Chrome Beta版本，終於重現了這個問題，正好研究解決下…

問題主要集中於淘寶首頁吊頂以及左側服務欄處，鼠標移過整個頁面會閃動一次，Refresh和Reopen沒法重現，只有當首次打開淘寶首頁纔會出現…

問題重現：

若是想查看此問題請訪問jsfiddler

問題定位：

個人第一感受是鼠標移動時觸發了某些JS，致使頁面從新加載了一遍從而出現閃動，可是使用Chrome控制檯監測Network狀態，發現頁面閃動並不會額外發送請求，這就排除了JS的問題。再檢查下這兩個地方的CSS源碼：

#site-nav .menu-hd b {
…
-webkit-transition: -webkit-transform .2s ease-in;
…
}

.product-main s {
…
-webkit-transition: all .2s ease-in-out;
…
}

上述兩個地方都使用了CSS3的Transition屬性，那是否是這個Transition致使的問題？因爲Refresh和Reopen頁面都沒法重現，只有當首次打開淘寶首頁纔會出現，最便捷的辦法就是使用Fiddler的Auto Responder功能來在線調試代碼，因而我嘗試將CSS代理到本地並去除-webkit-transition: all .2s ease-in-out;屬性，關閉瀏覽器後再次訪問淘寶首頁發現問題解決了，反向恢復屬性後執行上述操做，Bug再次重現…看來我好像找到緣由了，可是爲何是它？

尋找解決方案：

Google關鍵字「Chrome transition blink」和「Chrome transition bug」發現網上已經有不少人注意到這個問題，推測爲Chrome在初始渲染CSS動畫時產生的Bug，雖然暫時沒法考證這個問題的根本緣由，可是目前已知的解決方案有兩條：

• -webkit-backface-visibility: hidden;（ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）
• -webkit-transform-style: preserve-3d; （ 設置內嵌的元素在 3D 空間如何呈現：保留 3D ）

一些思考：

遇到一些很奇怪的Bug首先要快速定位，最經常使用的幾種定位Bug方法無非這幾種；其次要反覆調試，使用Fiddler這類輔助工具每每能節約大量時間和精力；最後就是要善於描述關鍵問題，並提煉出關鍵字（最好是英文）使用Google搜索相關解決方案。

感謝：

• 熱心反饋Bug的網友：@zyworkshop，@movinghorse，@笑笑
• 小馬對於技術方案和知識沉澱的熱心幫助！

相關連接：

• http://stackoverflow.com/questions/6332485/transformscale-causing-blinking-when-hovering
• http://stackoverflow.com/questions/2946748/iphone-webkit-css-animations-cause-flicker
• Chrome Bugs List

 

 

ZT FROM HP： http://ued.taobao.com/blog/2012/01/06/chrome%E6%B8%B2%E6%9F%93transition%E6%97%B6%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8bug/