Backface-Visibility Not Working Properly in Firefox (Works in Safari)

Question

I\'m having a problem with the back face-visibilty property. It works how I want it to in Safari/Chrome, but for some reason it\'s not working correctly in Firefox.

Answer 1

Add only -moz-backface-visibility: hidden; in the parent. This worked for me.

Answer 2

Try putting 'backface-visibility:hidden' both on the object and its container. This is what worked for me with this bug

Answer 3

This bug has been acknowledged by Mozilla.

The fix is to add transform: rotateX(0deg) to the front and back objects.

Adding backface-visiblity:hidden on the container, as suggested by @yalia, makes the back unresponsive in Chrome, hence that fix should be avoided.

Here's a fiddle with the fix.