Pourquoi “-webkit-transform-style: preserve-3d;” se faire divs disparaître?

Le code suivant devrait afficher une barre d'en-tête, un pied de page de la barre, et une image, mais pour une raison quelconque, dès que j'ai ajouter .div1 { -webkit-transform-style: preserve-3d; } je ne reçois que la barre d'en-tête. Je sais que cela semble assez inutile divs et style appliqué, mais j'ai besoin d'eux pour les effets que j'ai enlevé pour faciliter le débogage plus facile. Mon code de la page est:

<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>

OriginalL'auteur Grezzo | 2012-05-25

  1. 11

    Je pense que le problème ici est similaire à la célèbre comportement où position: absolute /fixed div qui n'ont pas une hauteur /largeur peut disparaissent souvent. Dans votre cas, la 3d canvas est à la recherche d' <div class="div1"> pour une largeur définie sur elle, sinon elle flotte sans but dans l'espace parce que vous avez donné des propriétés qui rendent l'utilisation de la 3d canvas et je crois que dans certains indirectement à fait ne pas l'étendre à contenir l'enfant divs.

    Dans tous les cas, vous pouvez voir que la définition de height et width sur l'élément avec preserve-3d résout le problème dans le JS fiddle: http://jsfiddle.net/nY9v6/

    Comment la confusion. Merci
    Une chose est sûre! Il est important de se rappeler que les spécifications de ces choses n'est pas encore définitive. Même les animations CSS3 (une spécification qui est plus mature que la 3d de la toile) a été trouvé buggy (en raison de la spec, pas à cause de la mise en oeuvre navigateur) et le spec va bientôt changer.
    C'est intéressant, connaissez-vous des articles qui abordent les bugs dans la spec?
    Non, mais j'ai discuté avec l'un des conférenciers à ce sujet vendredi. Vous ne savez pas si vous êtes au courant de la question avec l'impossibilité de faire de CSS transitions/animations sur display: none. Jonathan Snook en parle ici: snook.ca/archives/javascript/preparetransition-jquery-plugin ... de toute façon, ils ont décidé de la spec est erronée pour faire de l'animation sur display: none impossible et va changer bientôt.

    OriginalL'auteur Brian