Home/ Questions/Q 8031259
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T01:02:18+00:00

The following code should show a header bar, a footer bar, and an image,

  • 0

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:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 <div class="div1"> 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/

    • 0