javascript - 带有 CSS 过渡的 Firefox 中奇怪的像素移动/跳跃

Question

问题:

我正在使用 CSS 使卡片翻转并显示一只小猫。有一种行为似乎只存在于 Firefox 中，它不断地将图像移动/调整几个像素的大小。只需将鼠标悬停在卡片背面，观察它在缩放动画完成后 左右移动，然后点击卡片翻转卡片，观察小猫如何重新调整其位置以及动画后的大小。

同样，这在 Chrome 和 Internet Explorer 中都不会发生。任何人都可以解释导致它的原因或提供补救措施吗？

fiddle :

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

经过一番深入研究，这是一个 known issue 使用 Firefox 的亚像素渲染。更明显的效果演示可见here和 here .这种现象被称为“像素捕捉”，它在 Firefox 的动画中经常发生，尤其是在过渡结束时。

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