Firefox very ugly jittered blurred css3 transition (animation) - html

Question

Currently i am creating a website and i want to use the "new" css3 animations. It is hard to described what i've done, so i made a small example with the problem. When you hover with the mouse over the block the animation in firefox is very ugly. Furthermore the background image jitters 1px. The font gets blurry and the logo too. In IE11, Chrome its all working very fine :)
Here is the link: https://jsfiddle.net/0gk3fhnv/ or full code:
<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%;
}
Can you please tell me, whats causing this strange behavior? Is there a work around?

Answer 1

I've found a solution!
Look at 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);
}
}
I changed the transition duration for firefox to 0.01 seconds and a linear animation to obscure the blurry text. Furthermore i added the css code above, which adds a exception for Firefox. The code removes the skew of the background image. So you have to add a custom background image for Firefox and skew it for your % in Photoshop or another photo editing software.