Why does "-webkit-transform-style: preserve-3d;" make some divs disappear?

Question

The following code should show a header bar, a footer bar, and an image, but for some reason, as soon as I add `.div1 { -webkit-transform-style: preserve-3d; }` I only get the header bar. I know it appears to have some unnecessary divs and style applied, but I do need them for effects that I have stripped out to make debugging easier. My page code is: ```

```

Accepted Answer

I think the problem here is similar to the well-known behavior where `position: absolute / fixed` div's that don't have a defined height / width can often disappear. In your case, the 3d canvas is looking for `

` to have a width defined on it, otherwise it just floats aimlessly in space because you gave it properties that make use of the 3d canvas and I believe that in some indirect way causes it not to expand to contain the child divs. In any case, you can see that defining `height` and `width` on the element with `preserve-3d` fixes the issue in the JS fiddle: http://jsfiddle.net/nY9v6/

Why does "-webkit-transform-style: preserve-3d;" make some divs disappear?

Solution

Problem