Strange Pixel Shifting / Jumping in Firefox with CSS Transitions

Question

The Problem:

I'm using CSS to make a card flip around and show a kitten. There is a behavior that seems to only exist in Firefox whereby it is constantly shifting / resizing the images by a few pixels. Simply hover over the card back and watch as it moves around a little after the scale animation completes, then flip the card by clicking on it to observe how the kitten readjust its position and size after the animation as well.

Again, this does not happen in Chrome nor Internet Explorer. Can anyone explain what is causing it or provide a remedy?

The Fiddle:

http://jsfiddle.net/XEDEM/1/

The Code:

$('.card').mouseover(function() {
    $(this).css({
        'transform': 'scale(1.2)',
        '-webkit-transform': 'scale(1.2)',
        'transition': 'transform 500ms',
        '-webkit-transition': '-webkit-transform 500ms'
    });
}).mouseleave(function() {
    $(this).css({
        'transform': 'scale(1)',
        '-webkit-transform': 'scale(1)',
        'transition': 'transform 500ms',
        '-webkit-transition': '-webkit-transform 500ms'
    });
}).mousedown(function() {
    $('div.back').css({
        'transform': 'perspective(1000px) rotateY(-180deg) translateZ(0)',
        '-webkit-transform': 'perspective(1000px) rotateY(-180deg)',
        'transition': 'transform 800ms ease-in-out 300ms',
        '-webkit-transition': '-webkit-transform 800ms ease-in-out 300ms'
    });
    $('.hide').show();
    $('div.front').css({
        'transform': 'perspective(1000px) rotateY(0) translateZ(0)',
        '-webkit-transform': 'perspective(1000px) rotateY(0)',
        'transition': 'transform 800ms ease-in-out 300ms',
        '-webkit-transition': '-webkit-transform 800ms ease-in-out 300ms',
        'backface-visibility': 'hidden',
        '-webkit-backface-visibility': 'hidden'
    });
});

Answer 1

After some ardent research, this is a known issue with Firefox's sub-pixel rendering. More obvious demonstrations of the effect can be found here and here. The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition.

The solution, which is also proposed in the Bugzilla thread, is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it. However, it is the best I can hope for, so I'm accepting it as the answer.