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>
Come fonte di confusione. Grazie – Grezzo
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
Questo è interessante, conosci qualche articolo che discute i bug nelle specifiche? – Grezzo