March 14, 2012 1

New issue with 3D Transforms in Firefox 11


Following on from my post about 3D transforms with Firefox 10, here is some further information to help make sure your code works well with the newly released Firefox 11.

Since upgrading to Firefox 11 today I’ve run up against a new issue with using 3D transforms that didn’t appear in v10.

Using the rule -moz-backface-visibility: hidden, the expected result is that when a DOM element is facing away from the observer it isn’t visible. This seems to work as expected when an element is stationary but when attempting a card flip animation (like a couple of the transitions in Flux do) it seems to get ignored and as the animation occurs you get flickering between the two layers.

Here’s an example JSFiddle that shows the issue and a quick fix to work around it.

The fix is simple but it would be better if this wasn’t needed at all. To prevent a flicker you need to offset the front face of the card by a small amount in the Z plane so that the renderer knows how to stack the elements as they rotate.

-moz-transform: translateZ(1px);

That should resolve the problem.

As an aside, the framerate for transitions seems to be significantly lower since the upgrade, has anyone else noticed this?

  • Andy Piper

    Interesting – in Firefox this results in a flip between two sides of the square – in Webkit (Chrome and Safari latest) the square vanishes on flip, but doesn’t flicker as it does so.