Firefox issue rendering rotated image with perspective - html

Question

I've created a cube in css with perspevtive and rotateX/Y/X and with some translate I put the screen/camera into this cube (the goal is to create a skybox).
While it's ok in Chrome, Firefox seems to have some problem displaying background-image on some faces when thoses faces are to inclined.
Here is a codepen for example : http://codepen.io/poolboy/full/MaNgVK/
Html
<section class="cube-container">
<div id="cube">
<figure class="front"></figure>
<figure class="back"></figure>
<figure class="right"></figure>
<figure class="left"></figure>
<figure class="top"></figure>
<figure class="bottom"></figure>
</div>
</section>
Css
body {
overflow: hidden;
}
.cube-container {
width: 1024px;
height: 1024px;
position: relative;
perspective: 1000px;
margin: auto;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
/* animation: anim 20s linear infinite; */
}
#cube figure {
margin: 0;
width: 1024px;
height: 1024px;
display: block;
position: absolute;
/* border: 1px solid rgba(0,0,0,0); */
backface-visibility: hidden;
}
#cube .front { background: url(http://www.poolboy.fr/images/front.jpg) ; transform: translateZ( 511px
) rotateY( 180deg ); }
#cube .back { background: url(http://www.poolboy.fr/images/back.jpg) ; transform: rotateX( 180deg ) translateZ( 511px ) rotateZ(180deg) rotateY( 180deg ); }
#cube .right { background: url(http://www.poolboy.fr/images/right.jpg) ; transform: rotateY( 90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .left { background: url(http://www.poolboy.fr/images/left.jpg) ; transform: rotateY( -90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .top { background: url(http://www.poolboy.fr/images/top.jpg) ; transform: rotateX( 90deg ) translateZ( 511px ) rotateY( 180deg ); }
#cube .bottom { background: url(http://www.poolboy.fr/images/bottom.jpg) ; transform: rotateX( -90deg ) translateZ( 511px ) rotateY( 180deg ); }
#keyframes anim {
from {
transform: translateZ(511px) rotateY(0deg);
}
to {
transform: translateZ(511px) rotateY(360deg);
}
}
#cube {
/* transition: transform 1s; */
transform: translateZ(512px) rotateY(10deg);
}
Is there a way to ensure that image are correctly displayed in Firefox ?
Thanks

Answer 1

Firefox doesn't use transform-style, it uses -moz-transform-style. Try to replace that in your CSS code. Make sure transform-style: preserve-3d; becomes -moz-transform-style: preserve-3d;
Here is a list of Firefox extensions for CSS, use it well.
From Comment:
I took a deeper look at this, and found no issues with Hardware acceleration and that the -moz- prefix doesn't do anything, really. However, I did find that increasing the perspective did have an impact (A quite massive one on my part) on how the cube rendered. For my display (1920 x 1080), the sweet-spot of not losing quality and making it actually work was to set perspective: 1000px; to perspective: 1250px; I hope this helps, cause it certainly fixed it for me.