css - css3 translate3d zero height 100% destroyed -

i run problem google couldn't me. on container translate3d(0, 0, 0) applied , destroys dimensions of inner containers have width , height 100%. created small jsfiddle demonstrate this. if remove translate's on #page dimensions correct... http://jsfiddle.net/11vt14nx/1/

the html part

<div class="page-wrapper">     <section id="page">         <div class="artworkpage">             <figure class="vertical-middle">                 <img src="asda">             </figure>             <div class="data">                 <p class="description">asd</p>                 <div class="button-group align-center">                     <button class="like small" data-object-id="1">                         <span class="icon-thumbs-up"></span>                         <span class="value">0</span>                     </button>                     <button class="dislike small secondary" data-object-id="1">                         <span class="icon-thumbs-down"></span>                         <span class="value">0</span>                     </button>                 </div>             </div>         </div>     </section> </div> 

the css

.artworkpage {     figure {         position: absolute;         top: 0;         left: 0;         height: 100%;         width: 100%;         z-index: 1;         img {             position: absolute;             left: 0;             right: 0;             top: 0;             bottom: 0;             margin: auto;             max-width: 100%;             max-height: 100%;         }     }     .data {         position: absolute;         bottom: 0;         left: 0;         width: 100%;         z-index: 2;         background: rgba($body-bg, .8);         @include transition(all .2s linear);         &.hidden {             @include opacity(0);             display: block;         }         .description {             font-size: 14px;             padding: 5px 10px;             margin-bottom: 0;         }     } }  .page-wrapper {     #page {         white-space: nowrap;         @include translate3d(0, 0, 0);         & > div {             float: none;             white-space: normal;             width: 100%;             @include inline-block(top);         }     } } 

does know how fix this?

thanks in advance

regards thomas :)

just add height element

.page-wrapper #page {   white-space: nowrap;    -moz-transform: translate3d(0, 0, 0);   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);   height: 100vh } 

learn more sizing css3's vw , vh units

.artworkpage figure {    position: absolute;    top: 0;    left: 0;    height: 100%;    width: 100%;    z-index: 1;  }  /* line 119, ../sass/_base.scss */  .artworkpage figure img {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;    max-width: 100%;    max-height: 100%;  }  /* line 130, ../sass/_base.scss */  .artworkpage .data {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    z-index: 2;    background: rgba(239, 239, 239, 0.8);    -moz-transition: 0.2s linear;    -o-transition: 0.2s linear;    -webkit-transition: 0.2s linear;    transition: 0.2s linear;  }  /* line 138, ../sass/_base.scss */  .artworkpage .data.hidden {    filter: progid:dximagetransform.microsoft.alpha(opacity=0);    opacity: 0;    display: block;  }  /* line 142, ../sass/_base.scss */  .artworkpage .data .description {    font-size: 14px;    padding: 5px 10px;    margin-bottom: 0;  }     .page-wrapper #page {    white-space: nowrap;     -moz-transform: translate3d(0, 0, 0);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);    height: 100vh  }  /* line 155, ../sass/_base.scss */  .page-wrapper #page.from-left {    -moz-transform: translate3d(-100%, 0, 0);    -webkit-transform: translate3d(-100%, 0, 0);    transform: translate3d(-100%, 0, 0);  }  /* line 158, ../sass/_base.scss */  .page-wrapper #page.to-right {    -moz-transform: translate3d(0, 0, 0);    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);    -moz-transition: 0.2s linear;    -o-transition: 0.2s linear;    -webkit-transition: 0.2s linear;    transition: 0.2s linear;  }  /* line 162, ../sass/_base.scss */  .page-wrapper #page.to-left {    -moz-transform: translate3d(-100%, 0, 0);    -webkit-transform: translate3d(-100%, 0, 0);    transform: translate3d(-100%, 0, 0);    -moz-transition: 0.2s linear;    -o-transition: 0.2s linear;    -webkit-transition: 0.2s linear;    transition: 0.2s linear;  }  /* line 166, ../sass/_base.scss */  .page-wrapper #page > div {    float: none;    white-space: normal;    width: 100%;    display: inline-block;    vertical-align: top;    *vertical-align: auto;    *zoom: 1;    *display: inline;  }

    <div class="page-wrapper">          <section id="page">              <div class="artworkpage">                  <figure class="vertical-middle">                      <img src="http://images.tagseoblog.de/bilder/bild-foto/bild.jpg"/>                  </figure>                  <div class="data">                      <p class="description">asd</p>                      <div class="button-group align-center">                          <button class="like small" data-object-id="1">                              <span class="icon-thumbs-up"></span>                              <span class="value">0</span>                          </button>                          <button class="dislike small secondary" data-object-id="1">                              <span class="icon-thumbs-down"></span>                              <span class="value">0</span>                          </button>                      </div>                  </div>              </div>          </section>      </div>