CODEWITHSUNDEEP
htmlcssfirefoxtransform
Phlume
Phlume

Reputation: 3131

stutter/flicker in 3d transform for firefox

I came across THIS SITE today and the 3dtransform of the QR code was unbearable in FF.

I viewed the same site in Chrome and the animation was much smoother. I wanted to know what was going on so I viewed the source and stripped out the non-pertinent info and created a fiddle:

DEMO

The core code I pulled from that site is here:

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);}

}

The only BUG REPORT I've seen on the topic doesn't have much info in the way of 'solving' the issue.. there is even difficulty in reproducing it.

Going to CanIUse shows that it was available on my version of FF, and even toggling hardware acceleration in the FF browser didn't really alter the situation.

Does anyone know the root cause of the 3D Transform issue in FF, and what may be done to remedy the situation?

Upvotes: 1

Views: 1535

Answers (1)

Mircea
Mircea

Reputation: 11593

Just get the perspective out of the animation and put it into the main rule:

.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;
}

Here is the demo: http://jsfiddle.net/PLZ2j/1/

Updated DEMO (for Chrome)

Upvotes: 1

Related Questions