奇怪的像素移动/跳跃在Firefox与CSS过渡

Strange Pixel Shifting / Jumping in Firefox with CSS Transitions

本文关键字：Firefox CSS 过渡 跳跃 像素 移动      更新时间：2023-09-26

问题:

我正在使用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'
    });
});

经过一番热心的研究，这是一个已知的问题 Firefox的亚像素渲染。可以在这里和这里找到更明显的效果证明。这种现象被称为"像素捕捉"，它在Firefox的动画中经常出现，特别是在过渡结束时。

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

相关文章：