title: Why does "-webkit-transform-style: preserve-3d;" make some divs disappear?
body: <p>The following code should show a header bar, a footer bar, and an image, but for some reason, as soon as I add <code>.div1 { -webkit-transform-style: preserve-3d; }</code> 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:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;style&gt;
              body {
                  margin: 0px;
              }
              .div1 {
                  -webkit-transform-style: preserve-3d;
              }
              .div2 {
                  position: absolute;
                  width: 100%;
                  height: 100%;
              }
              img {
                  max-width: 50%;
                  max-height: 50%;
                  display: block;
              }            
              .footer {
                  position: fixed;
                  bottom : 0px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="div1"&gt;
              &lt;div class="div2"&gt;
                  &lt;div class="header"&gt;
                      Header
                  &lt;/div&gt;
                  &lt;div class="imgdiv"&gt;
                      &lt;img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="footer"&gt;
                      Footer
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>