Почему «-webkit-transform-style: preserve-3d;» заставить некоторые divs исчезнуть?

В следующем коде должна отображаться панель заголовка, нижняя колонтитула и изображение, но по какой-то причине, как только я добавляю .div1 { -webkit-transform-style: preserve-3d; }, я получаю только панель заголовка. Я знаю, что у него, кажется, есть ненужные div и стиль, но мне нужны они для эффектов, которые я удалил, чтобы облегчить отладку. Моя страница код:Почему «-webkit-transform-style: preserve-3d;» заставить некоторые divs исчезнуть?

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

источник

2012-05-25 Grezzo

Я думаю, что проблема здесь похожа на хорошо известное поведение, где position: absolute/fixed ДИВ о том, что не имеет определенную высоту/ширину часто может исчезнуть. В вашем случае 3D-холст ищет <div class="div1">, чтобы иметь определенную ширину, иначе он просто бесцельно плывет в пространстве, потому что вы дали ему свойства, которые используют трехмерный холст, и я считаю, что косвенным образом это не приводит к тому, что expand, чтобы содержать дочерние div.

В любом случае, вы можете увидеть, что определение height и width на элементе с preserve-3d устраняет проблему в скрипку JS: http://jsfiddle.net/nY9v6/

источник

2012-05-31 23:53:00 Brian

Как запутанным. Thankyou – Grezzo

Несомненно! Важно помнить, что спецификация для этих вещей еще не окончательна. Даже анимация CSS3 (спецификация, более зрелая, чем 3D-холст) была найдена ошибкой (из-за спецификации, а не из-за реализации браузера), и спецификация скоро изменится. – Brian

Это интересно, знаете ли вы какие-либо статьи, в которых обсуждаются ошибки в спецификации? – Grezzo

-3

хороший образец

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

источник

2012-08-03 12:24:11

Почему «-webkit-transform-style: preserve-3d;» заставить некоторые divs исчезнуть?

ответ

Смежные вопросы