CSS3 flip animation bug in firefox

Question

I created a flip animation with css3. On webkit browsers the flip looks fine, but in firefox the flip animation doesn't work properly. You can see that the flip animation works, but it looks really "weird" and doesn't flip all the way.

My html:

<li class="employee">
   <div class="employee_container">
        <div class="front flip">
            <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt="">
        </div>
        <div class="back flip">
            <h2>Title</h2>
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
        </div>
    </div>
</li>

My CSS:

.employee {
    width:33%;
    float:left;
    display:block;
    padding:0.5em;
    height:20em;
}

.employee_container {
    height:100%;
    position:relative;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.back, .front {
    border: 3px solid #cecece;
    position:absolute;
}

.front img {
    min-height:100%;
    height:auto;
    width:100%;
}

.front {
    overflow:hidden;
    width:100%;
    height:100%;
    z-index:900;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.active .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

.back {
    background-image: url(img/RD.png);
    background-repeat: no-repeat;
    background-position:90% 93%;
    padding:1em;
    background-color:#ecad40;
    height:100%;
    width:100%;
    z-index:800;
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;

    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;

    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.active .back {
    z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}

.back h3 {
    font-weight:normal;
    font-size:0.8em;
}

.back p {
    font-size:1em;
    padding-top:1em;
    border-top:1px dashed white;
    margin-top:1em;
}

I made a fiddle to show the bug

http://jsfiddle.net/vDQwQ/1/

Thanks in advance

UPDATE: I did a test on 4 different computers(windows and mac OS) running the latest version of firefox, and it's the same on all computer's.

Answer 1

Since you declare rotateY(-180deg), the browser has the choice which direction it chooses when flipping the card (the rotation could go from left or from right).

Chrome "accidently" takes the correct direction for both faces, firefox takes the reverse way for the backface. Taking rotateY(-179deg) (or rotateY(181deg)) will force Firefox to use the same direction.

fixed Example

However, the even better way would be to just leave the faces as they are and instead animate the parent! Also you don't need javascript for that (which introduces much less code:pure css example)!

This article about 3d transforms helped me alot when I started getting into the 3d transform stuff. It's definitely worth reading.

Answer 2

Is it when you rollover the bottom edge?

If so it is running the mouseenter event, then the mouseleave event straight after so it never fully animates.

Add the logs to your Javascript for your code in the question

$('.employee_container').hover(
  function(){
    $(this).addClass('active');
    console.log('over');
  },
  function(){
    $(this).removeClass('active');
    console.log('off');
  }
);

You may need to add something to not run the mouseleave event until the animation is complete.

something like this see fiddle http://jsfiddle.net/vDQwQ/10/

var animating = false;
var callback = function(){ 
  animating = false 
};

$('.employee_container').hover(
  function(){

    if(animating) return;
    animating = true;

    $(this).addClass('active');

    //set small delay
    setTimeout(callback, 100);

  },
  function(){

    if(animating) return;
    animating = true;

    $(this).removeClass('active');

    //set small delay
    setTimeout(callback, 100);
  }
);

If you rollover and out a quickly it can get confused.

The best way to prevent anything like this would be to make it work on a click rather than hover.

Hope this helps