2012年8月15日 星期三

Chrome 瀏覽器造成 css3 黑屏


chrome 16, css3 ,html5, transition, animation

避免google 瀏覽器執行CSS3屬性時出現黑屏


前一陣子開發web前端服務,大量的使用CSS3的動畫特效,尤其是animation與transition,原本一切都好好的,某天,Chrome瀏覽器自動更新後(版本16之後),突然畫面上就偶發性的出現黑色區塊,或是邊界殘影,上網搜尋了很久,發現也有不少人遇到這個問題。


經過一番辛苦的爬文後,依然沒有結論,只知道確定是Chrome瀏覽器的問題,因為別家browser的都沒事。Case就這樣擺爛放著一陣子,有一天,同事突然問了一句,他需要回報確定的發生問題,想知道究竟是設定了哪個屬性才造成這種現象,恩...然後...我發現...疑...沒有設定屬性耶,那怎麼效果跑的這麼開心,又經過一翻研究,發現,原來在chrome中,animation與transition沒有特別指定要套用的屬性時,預設是 all,也就是全屬性。


噹噹~! 馬上就著手進行測試,嗯嗯,設定成特定屬性試試看,哇,果然黑色區塊的問題不翼而飛,接下來直接寫上transition全屬性套用呢? 嘿嘿,問題又出現了! 賓果,抓到你了!


結論,使用CSS3的transition與animation時,為了避免在chrome瀏覽器出現錯誤,記得要指派特定的屬性喔~


各位看到這裡,一定覺得奇怪,怎麼會有stylesheet裡面的樣式用到css3特效卻沒有指定屬性的,這裡要特別說明,就是有! 因為我們知道CSS3特效要作用,必須要設定好幾個參數:[時間]、[屬性]、[播放方式],又由於目前各家瀏覽器都是屬於beta階段,所以都要加上前綴,這樣一來樣式設定就會變成以下的樣子。

.myClass {

 transition-duration:0.3s;
 -moz-transition-duration:0.3s;
 -webkit-transition-duration:0.3s;
 -o-transition-duration:0.3s;
 -ms-transition-duration:0.3s;
   
 transition-timing-function: linear;
 -moz-transition-timing-function: linear; /* Firefox 4 */
 -webkit-transition-timing-function: linear; /* Safari and Chrome */
 -o-transition-timing-function: linear; /* Opera */ 

 transition-property:width,height; 
 -moz-transition-property:width,height;
 -webkit-transition-property:width,height;
 -o-transition-property:width,height;
 -ms-transition-property:width,height; 
}



看到沒,長長一大段,為了可以讓代碼重複使用,所以我們做了如下的抽象化動作


.TransSettings {
    
 transition-duration:0.3s;
 -moz-transition-duration:0.3s;
 -webkit-transition-duration:0.3s;
 -o-transition-duration:0.3s;
 -ms-transition-duration:0.3s;
   
 transition-timing-function: linear;
 -moz-transition-timing-function: linear; /* Firefox 4 */
 -webkit-transition-timing-function: linear; /* Safari and Chrome */
 -o-transition-timing-function: linear; /* Opera */ 
}

.opacTrans {
 transition-property:opacity; 
 -moz-transition-property:opacity;
 -webkit-transition-property:opacity;
 -o-transition-property:opacity;
 -ms-transition-property:opacity;  
}
.borderTrans{
 transition-property:border; 
 -moz-transition-property:border;
 -webkit-transition-property:border;
 -o-transition-property:border;
 -ms-transition-property:border;  
}
  

使用的時候就可以這樣指派

class="TransSettings opacTrans"


有沒有發現,上面的TransSettings就成了"沒有設定屬性的"CSS3特效了


解決方式

將TransSettings改成如下:

.Trans {
 transition-property:none; 
 -moz-transition-property:none;
 -webkit-transition-property:none;
 -o-transition-property:none;
 -ms-transition-property:none;  
    
 transition-duration:0.3s;
 -moz-transition-duration:0.3s;
 -webkit-transition-duration:0.3s;
 -o-transition-duration:0.3s;
 -ms-transition-duration:0.3s;
   
 transition-timing-function: linear;
 -moz-transition-timing-function: linear; /* Firefox 4 */
 -webkit-transition-timing-function: linear; /* Safari and Chrome */
 -o-transition-timing-function: linear; /* Opera */ 
  
 }

也就是加上了 transition-property:none的設定,就可以避免問題發生囉,另外,animation也可以如法炮製,如下

.animationSet {
 -webkit-animation-name:none;
 -moz-animation-name:none;
 -ms-animation-name:none;
 -o-animation-name:none;
 animation-name:none;
 -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
     -ms-animation-duration: 0.8s;
      -o-animation-duration: 0.8s;
         animation-duration: 0.8s;
 -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
      -o-animation-fill-mode: both;
         animation-fill-mode: both;
}

animation目前還沒找到解決方法!




P.S 因為問題的發生是設定成全屬性造成(或沒設定預設全屬性),所以千萬不要貪圖方便就使用全屬性的設定方法喔。
CSS3 Animations
CSS3 Transitions