translateZ not working on Firefox

Question

I have been trying to hide a child element "list" behind the parent element "div2" using translateZ. It works fantastically in chrome but not on firefox. Some body please help.

Link to JSFiddle . translateZ on firefox

.list {
  width: 200px;
  height: 10px;
  background-color: yellow;
  -moz-transform: translateZ(-1em);
  -webkit-transform: translateZ(-1em);
}

Please find the image here Image Link

Image on the left side which is working correctly on chrome. Yellow bar is behind red div. Image on the right is from firefox in which yellow bar is in front of the red div - which was not expected.

Answer 1

The transform-style: preserve-3d; isn't inherited, it has to be set to each descendent in the hierarchy to keep them in the same 3D space.

You have preserved 3D inheritance in #div1 and #div2, but not in the .sub grandchild, so the lineage is broken for the .list grandgrandchild you wish to Z-move.

If you add it to your .sub CSS it will accept its child .list into the 3D space and apply the Z transform.

.sub {
  height: 20px;
  width: 50px;
  background-color: black;
  transform-style: preserve-3d;
}