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

css-transitions css-transforms
realph picture realph · Mar 7, 2012 · Viewed 9.8k times · Source

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.

When the box flips, I get a mirror image of the front face.

Answer

Noel Abrahams picture Noel Abrahams · Sep 6, 2015

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.

Related questions

Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More
Hover effect : expand bottom border

I'm trying to get a transition hover effect on border that the border expands on hover. I've tried this on Jsfiddle

Read More