Html Firefox非常丑陋抖动模糊的css3过渡（动画）

目前我正在创建一个网站，我想使用新的css3动画。很难描述我做了什么，所以我举了一个小例子来说明这个问题。当您将鼠标悬停在块上时，firefox中的动画非常难看。此外，背景图像抖动1px。字体变得模糊，徽标也变得模糊。在IE11中，Chrome的所有功能都非常出色： 以下是链接：或完整代码：

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

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

我找到了解决办法！ 看

---

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

Firefox有缺陷。在这里，你可以看到没有它们的情况下它是多么的平滑：好吧，那么当Firefox出现带有skew的bug时，有没有其他的选择呢？我不想失去歪斜效应；据我所知，你总是可以做更多的3d事情，但肯定不会像skew那样：

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%;
}

    @-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);
        }   
    }