Backface-visibility doesn't work on Firefox

Question

I'm making this website and i'm on a big issue between browsers. I've added some animations on the site and i had problem with elements moving when i was triggering an animation. I solved it by adding backface-visibility:hidden; with all the necessary browsers prefixes. On Chrome everything is ok, but on firefox didn't work. Here is what i added after searching and asking here

 /*perspective*/
-webkit-perspective:0;
   -moz-perspective:0;
    -ms-perspective:0;
     -o-perspective:0;
        perspective:0;
/*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;
/*transform*/
-webkit-transform:translate3d(0,0,0);
   -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
     -o-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0);

Answer 1

This is a known issue as per explained in this thread and in this ticket.

Here is the only workaround that worked for me:

Adding 'transform: rotateX(0deg)' to the .front, .back rule fixes this.