CSS 翻转动画因浏览器而异

Question

这是一个简单的水平翻转动画 - http://jsfiddle.net/vntajmgh/2/
我看到 2 个问题:

1. 在 chrome 中打开 url。将鼠标悬停在红色 div 上。翻转没问题，但没有应用背面 div 的背景颜色(蓝色)。

2. 在 firefox 中打开 url。翻转就像卡住了一样。有时我可以看到蓝色的背面 div。

我猜它“卡住”在这里是因为高度是 100vh，当降低时它工作正常，但它不应该也适用于全高吗？

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

更新:这是工作 fiddle - http://jsfiddle.net/gf3g8sz1/1/

Answer 1

添加一个溢出隐藏到父 div(翻转容器)。当我们将 100vh(视口(viewport)高度)与旋转变换属性一起使用时，它实际上占用的高度比视口(viewport)高。所以通过使用 overflow hidden 来隐藏它。

CSS

.flip-container {
    overflow:hidden;
}

要在两个浏览器中获得相同的悬停效果，您必须修改悬停 CSS。

DEMO