使用CSS过渡在Firefox中奇怪的像素移位/跳跃

Question

问题:

我正在使用CSS来翻转卡片并展示一只小猫.有一种行为似乎只存在于Firefox中,因此它会不断地将图像移动/调整几个像素.只需将鼠标悬停在卡背上,观察它在缩放动画完成后移动一点,然后通过单击它来翻转卡片以观察小猫在动画之后如何重新调整其位置和大小.

同样,这不会发生在Chrome或Internet Explorer中.任何人都可以解释是什么导致它或提供补救措施？

小提琴:

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

代码:

$('.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

经过一些热烈的研究,这是Firefox的子像素渲染的一个已知问题.在这里和这里可以找到更明显的效果示范.这种现象被称为"像素捕捉",它在Firefox的动画中经常出现,特别是在转换结束时.

在Bugzilla线程中也提出的解决方案是添加rotate(0.0001deg)到缩放变换.这大大降低了效果,但并未完全消除它.然而,这是我所能期待的最好的,所以我接受它作为答案.