Chrome在css3动画期间并不总是应用透视

Question

我有一个Chrome中的随机错误，其中CSS3 3D Transform的视角被忽略，直到动画的最后一帧。它不会每次都发生，并且似乎没有模式。

您可以在此处查看示例：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规则。