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

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

fixes the problem in Firefox.