2012-05-25 4 views
7

Il seguente codice dovrebbe mostrare una barra di intestazione, una barra di un piè di pagina e un'immagine, ma per qualche motivo, non appena aggiungo .div1 { -webkit-transform-style: preserve-3d; } ottengo solo la barra dell'intestazione. So che sembra che ci siano alcuni div non necessari e lo stile applicato, ma ho bisogno di questi per gli effetti che ho spogliato per facilitare il debugging. Il mio codice della pagina è:Perché "-webkit-transform-style: preserve-3d;" far sparire alcune div?

<html> 
    <head> 
     <title></title> 
     <style> 
      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; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="div1"> 
      <div class="div2"> 
       <div class="header"> 
        Header 
       </div> 
       <div class="imgdiv"> 
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg"> 
       </div> 
       <div class="footer"> 
        Footer 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

risposta

11

Credo che il problema qui è simile al comportamento noto dove spesso possono scomparire position: absolute/fixed DIV che non hanno un'altezza/larghezza definita. Nel tuo caso, la tela 3D è alla ricerca di <div class="div1"> per avere una larghezza definita su di essa, altrimenti galleggia senza scopo nello spazio perché le hai dato delle proprietà che fanno uso della tela 3d e credo che in qualche modo indiretto lo faccia non espandi per contenere i div dei bambini.

In ogni caso, si può vedere che la definizione height e width sull'elemento con preserve-3d risolve il problema nel violino JS: http://jsfiddle.net/nY9v6/

+0

Come fonte di confusione. Grazie – Grezzo

+0

Sicuro! È importante ricordare che le specifiche per queste cose non sono ancora definitive. Anche le animazioni CSS3 (una specifica più matura della tela 3D) sono state trovate buggate (a causa delle specifiche, non a causa dell'implementazione del browser) e le specifiche cambieranno presto. – Brian

+0

Questo è interessante, conosci qualche articolo che discute i bug nelle specifiche? – Grezzo