firefox的3d變換中的stutter/flicker

今天我遇到了THIS SITE，並且FF中的QR碼的3dtransform難以承受。firefox的3d變換中的stutter/flicker

我在Chrome中查看了同一個網站，動畫更流暢。我想知道發生了什麼事情，所以我認爲在源和剝離出來的非相關信息，並創建了一個小提琴：

的核心代碼，我從網站拉是在這裏：

HTML

<div class="QRcode3d"> 
    <img alt="QR Code Cube 1" src="http://blog.qr4.nl/images/QR-Cube-1.jpg"> 
</div>

CSS

.QRcode3d { 
    height: 331px; 
    margin: 150px auto; 
    position: relative; 
    transform: scale(0.9); 
    transform-style: preserve-3d; 
    width: 331px; 
    animation: 30s linear 0s normal none infinite spin1; 
    display: block; 
} 

@-webkit-keyframes spin1 { 
    0% {-webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);} 
    100% {-webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);} 
} 

@keyframes spin1 { 
    0% {transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);} 
    100% {transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);}

}

唯一的BUG REPORT我在這個主題上看到的沒有太多的信息來解決這個問題，甚至有很難再現它。

進入CanIUse表明它在我的FF版本中可用，甚至在FF瀏覽器中切換hardware acceleration並沒有真正改變這種情況。

有誰知道FF中3D變換問題的根本原因，並且可以採取什麼措施來糾正這種情況？

來源

2014-01-24 Phlume

剛剛得到的角度出來的動畫，並把它變成主要的規則：

.QRcode3d { 
    height: 331px; 
    margin: 150px auto; 
    position: relative; 
    transform: scale(0.9); 
    transform-style: preserve-3d; 
    width: 331px; 
    animation: 30s linear 0s normal none infinite spin1; 
    display: block; 
    perspective: 600px; 
}

以下是演示：http://jsfiddle.net/PLZ2j/1/

更新DEMO（Chrome瀏覽器）

來源

2014-01-24 17:35:33 Mircea

非常好，謝謝您。我添加了那個小提琴，因爲我發佈的那個忽略了''animation'規則上的'-webkit-'供應商前綴。我更新了它，並從動畫規則中刪除了'perspective'。 – Phlume

firefox的3d變換中的stutter/flicker

回答

相關問題