CSS perspective not working in Firefox

Question

This is probably the simplest question anyone has ever asked on SO but my mind is drawing a blank this morning. Maybe I need more coffee.

Basically I\'m trying to ad

Answer 1

POSSIBLE WORKAROUND: In case this helps anyone... I just found that in Firefox you can add transform-style: inherit; to all elements between the element with perspective set and the element being transformed and you should see your transform.

NOTE: You must set transform-style: preserve-3d; on the element with perspective set for this to work.

This is a bit hacky but until they change the implementation this seems to be the only way I could find to do it.

Answer 2

You are seeing Bug 716524 - 'perspective' only affects child nodes, not further descendants. The defect describes that there is a difference between Chrome and Firefox in their interpretation of what inherited means. It looks like it should not be inherited, according to perspective MDN documentation but I sort of agree with Chrome as it feels intuitive to propagate it to descendants.

I tried the workaround from 3D transformations with Firefox 10+ which recommends reapplying transform-style: preserve-3d (with or without the -moz- depending on which versions of Firefox you care about supporting) at each depth but that still wasn't working for me.

Moving perspective and perspective-origin to the <ul> fixes the problem in Firefox.