Firefox 非常难看的抖动模糊的 css3 过渡（动画）答案

【问题标题】：Firefox very ugly jittered blurred css3 transition (animation)Firefox 非常难看的抖动模糊的 css3 过渡（动画）
【发布时间】：2015-05-12 13:04:33
【问题描述】：

目前我正在创建一个网站，我想使用“新”css3 动画。很难描述我所做的事情，所以我就这个问题做了一个小例子。当您将鼠标悬停在块上时，Firefox 中的动画非常难看。此外，背景图像抖动 1px。字体变得模糊，徽标也变得模糊。在 IE11 中，Chrome 一切正常 :) 这是链接：https://jsfiddle.net/0gk3fhnv/ 或完整代码：

<ul id="parallelogram-box">
<li class="parallelogram">
    <div class="text">Very nice descr Text! And here sec Row...</div>
    <div class="logo"></div>
</li>
</ul>

body {
    background: #eee;
}
#parallelogram-box {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    text-align: center;
}
#parallelogram-box li {
    text-align: left;
    position: relative;
    list-style-type: none;
    display: inline-block;
    min-height: 400px;
    min-width: 200px;
    max-width: 200px;
    transform: skew(-15deg);
    -o-transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
    margin: 20px;
    overflow: hidden;
    border-radius: 5%;
    backface-visibility: hidden;
}
#parallelogram-box li:hover .text {
    bottom: 0px;
    transition: bottom 0.2s ease-in 0s;
    -webkit-transition: bottom 0.2s ease-in 0s;
    -moz-transition: bottom 0.2s ease-in 0s;
    -o-transition: bottom 0.2s ease-in 0s;
}
#parallelogram-box li:hover {
    transform: skew(-15deg);
    -o-transform: skew(-15deg);
    -webkit-transform: skew(-15deg);
}
#parallelogram-box li:before {
    content: "";
    position: absolute;
    width:200%;
    height:200%;
    z-index: -1;
    transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
li.parallelogram:before {
    background: url(http://i65.photobucket.com/albums/h235/Ignwar/Album%20Mountains/AlaskanMonoliths.jpg);
    background-position: -1000px -200px;
}
#parallelogram-box p {
    font-size: 20px;
    text-align: center;
}
#parallelogram-box li > * {
    transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -o-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
    -webkit-transform: skew(15deg) translateZ(0) scale(1.0, 1.0) translate3d(0,0,0);
}
.text {
    background: rgba(36,36,36,.9);
    color: #e9e9e9;
    position: absolute;
    bottom: -75px;
    height: 100px;
    width: 180px;
    z-index: 1;
    font-size: 14pt;
    margin-left: -12px;
    text-align: center;
    padding: 10px 25px 10px 25px;
    transition: bottom 0.1s ease-in 0s;
    -webkit-transition: bottom 0.1s ease-in 0s;
    -moz-transition: bottom 0.1s ease-in 0s;
    -o-transition: bottom 0.1s ease-in 0s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.logo {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    width: 200px;
    height: 200px;
}
.parallelogram .logo {
    background: url(http://www.findthatlogo.com/wp-content/uploads/2011/10/dallas-mavericks-logo.png) no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}

你能告诉我，是什么导致了这种奇怪的行为？有解决办法吗？

【问题讨论】：

Firefox 与 skew 存在问题。在这里，您可以看到没有它们是多么流畅：jsfiddle.net/0gk3fhnv/1
好的，那么当 Firefox 出现倾斜问题时，是否有替代方案？我不想失去倾斜效果；（
据我所知：你总是可以做更多 3d 的事情，但肯定不一样 skew：jsfiddle.net/0gk3fhnv/2

标签： html css firefox animation transition

【解决方案1】：

我找到了解决方案！看https://jsfiddle.net/0gk3fhnv/5/

    @-moz-document url-prefix() {
        #parallelogram-box li:after {
            content: "";
            position: absolute;
            width:200%;
            height:200%;
            z-index: -1;
            transform: none !important;
        }

        li.parallelogram:after {
            background-image: url(for_firefox_skewed_picure.png);
        }   
    }

我将 firefox 的过渡持续时间更改为 0.01 秒，并使用线性动画来掩盖模糊的文本。此外，我添加了上面的 css 代码，它为 Firefox 添加了一个例外。该代码消除了背景图像的倾斜。因此，您必须为 Firefox 添加自定义背景图像，并在 Photoshop 或其他照片编辑软件中为您的百分比倾斜它。

【讨论】：