jquery - Chrome not always applying perspective during css3 animation

Question

I have what appears to be a random bug in Chrome where the perspective of CSS3 3D Transform is ignored until the last frame of the animation. It doesn't happen each time, and there doesn't appear to be a pattern.

You can see an example here: 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');
});

Any ideas what this could be?

Answer 1

我也遇到了这个。我猜这是一个错误，但你可以通过添加来避免它

-webkit-backface-visibility: hidden;

到您的html, bodyCSS 规则。