css3 translate3d zero height 100% destroyed

Question

I run into a problem where google couldn't help me. On a container is translate3d(0, 0, 0) applied and this destroys the dimensions of the inner containers which have width and height 100%. I created a small jsfiddle to demonstrate this. If you remove the translate's on #page the dimensions are 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 someone know how to fix this?

Thanks in advance

Regards Thomas :)

Answer 1

Just add Height to that 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 about Sizing with CSS3's vw and 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: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 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: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 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: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 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>