CSS flip animation varies in browser

Question

Here is a simple horizontal flip animation - http://jsfiddle.net/vntajmgh/2/
and I see 2 issues:

1. Open the url in chrome. Hover over the red div. The flip is ok, but the background color for the back div(blue) is not applied.

2. Open the url in firefox. The flip is like stuck. I can see the blue colored back div sometimes.

I guess it's 'stuck' here because the height is 100vh, which when reduced works fine, but should it not work with the full height too?

.flip-container {
    width: 150px;
    height: 100vh;
    perspective: 800px;
    color: #fff;
    position: relative;    
}
.flipper {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform linear 0.6s;
}
.flipper div {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flipper .front {
    background: red;
}
.flipper div:after {
    content:"";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("http://www.transparenttextures.com/patterns/3px-tile.png");
    width: 100%;
    height: 100%;
    opacity: 0.5;
    z-index: 1;
}
.flipper .back {
    background: blue;
    transform: rotateY(180deg);
}
.flipper:hover {
    transform: rotateY(180deg);
}

<div class="flip-container">
    <div class="flipper">
        <div id="1front" class="front">1-front</div>
        <div id="1back" class="back">1-back</div>
    </div>
</div>

UPDATE: Here is the working fiddle - http://jsfiddle.net/gf3g8sz1/1/

Answer 1

Add an overflow hidden to the parent div(flip-container). When we are using 100vh(view port height) with rotate transform property, its actually taking more height than the view port has. so hide it by using overflow hidden.

css

.flip-container {
    overflow:hidden;
}

To get the same hover effect in both browser you have to modify the hover CSS.

DEMO