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.
Perspective origin doesn’t work the same
perspective-originCSS 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-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.
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
The most repeatable example is that
backface-visibilty appears to be ignored when
z-index is applied.
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