使用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的子像素渲染的 known issue 。可以找到更明显的效果演示here和here。这种现象被称为“像素捕捉”，它在Firefox的动画中经常出现，特别是在转换结束时。

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