Firefox 10 was released toward the end of January and added support for 3D transforms. Here are some lessons learned whilst ensuring Flux Slider worked with Firefox.

There are some definite differences between the Firefox & WebKit implementation of 3D transforms, I’m not familiar enough with the details of the spec to know which is “correct” but I’ve outlined what I’ve found.

Perspective doesn’t propagate

In a WebKit browser, when perspective is applied to an element the effect propagates to all child elements irrespective of depth. In Firefox it appears that the effect is only applied to the elements direct child elements.

JSFiddle Example

Update: You can work around this issue in Firefox by adding -moz-transform-style: preserve-3d at each depth, JSFiddle Example. Thanks to Gustaff Weldon & Bartek Szopka for the fix.

Update: There is a ticket in the Mozilla bug tracker for this already: Bug 716524. Thanks to Rob Hawkes for finding this.

Perspective origin doesn’t work the same

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point (abscissa) by the perspective property. (MDN)

I use this property in the bars3D transition in Flux and the desired effect is that all the “slices” created, and subsequently rotated, have a common vanishing point.

In WebKit if you apply perspective and perspective-origin on an element then all child elements calculate the vanishing point based on the vanishing point for that element.

In Firefox however the perspective-origin property seems to be inherited by child elements and the value calculated for each element. For example if perspective-origin property is set to 50% 50% then instead of the vanishing point for each child being the parents centre, they become the centre of each element.

JSFiddle Example

Update: Thanks again to Bartek Szopka for another fix. Instead of using -moz-perspective: 500 you can use -moz-transform: perspective(500px) along with -moz-transform-style: preserve-3d to work around this, JSFiddle Example.

Don’t mix z-index with 3D transforms

When Chrome added support for 3D transforms it was sometimes needed to add z-index values to help it correctly stack layers in 3D space. Firefox however appears to behave quite erratically when you mix 3D transforms with z-index.

The most repeatable example is that backface-visibilty appears to be ignored when z-index is applied.

JSFiddle Example

Detecting 3D transform support

The Media Query technique Modernizr uses to detect 3D transform support in WebKit doesn’t work in Firefox. Instead you can just check for the existance of the MozPerspective CSS property:

'MozPerspective' in document.body.style

Update: To prevent confusion, Modernizr correctly identifies 3D transform support for Firefox 10 by using a combination of the two techniques above (apologies if it sounded like I was suggesting otherwise). If like me you need to support a library that isn’t dependant on Modernizr then you’ll need to add the perspective check to your detection code. Here is the code Flux uses.

Still no matrix object

There is still no MozCSSMatrix object to replicate the functionality of the WebKitCSSMatrix object. This means that there are a still a lot of cool things you can do with JavaScript & transforms in WebKit that you can’t in Firefox (e.g. Morf.js);