在css3動畫過程中，Chrome並不總是應用透視圖

Question

我看起來像Chrome中的一個隨機錯誤，其中CSS3 3D轉換的透視圖被忽略，直到動畫的最後一幀。它不會每次都發生，並且看起來不是一種模式。

這裏你可以看到一個例子：http://jsfiddle.net/6gCBx/15/

HTML：

<div id="holder">click me</div> 

CSS

html, body{ 
    width: 100%; 
    height: 100%; 
    background-color: #444444; 
    padding: 0; 
    margin: 0; 
    -webkit-perspective: 600px; 
} 

#holder{ 
    width: 100%; 
    height: 100%; 
    background-color: #F5F5F5; 
    -webkit-transition: -webkit-transform 0.5s ease; 
    -webkit-transform-origin: 50% 100%; 
} 

.tilt{ 
    -webkit-transform: rotateX(40deg); 
} 

的jQuery：

$('#holder').click(function(){ 
    $('#holder').toggleClass('tilt'); 
}); 

任何想法，這可能是？

Answer 1

我也遇到了這個問題。我猜這是一個錯誤，但你可以通過添加

-webkit-backface-visibility: hidden; 

您html, body CSS規則避免它。