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

The Cave

2012年8月15日星期三