问题:
我正在使用 CSS 使卡片翻转并显示一只小猫。有一种行为似乎只存在于 Firefox 中,它不断地将图像移动/调整几个像素的大小。只需将鼠标悬停在卡片背面,观察它在缩放动画完成后 左右移动,然后点击卡片翻转卡片,观察小猫如何重新调整其位置以及动画后的大小。
同样,这在 Chrome 和 Internet Explorer 中都不会发生。任何人都可以解释导致它的原因或提供补救措施吗?
fiddle :
代码:
$('.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'
});
});
最佳答案
经过一番深入研究,这是一个 known issue 使用 Firefox 的亚像素渲染。更明显的效果演示可见here和 here .这种现象被称为“像素捕捉”,它在 Firefox 的动画中经常发生,尤其是在过渡结束时。
同样在 Bugzilla 线程中提出的解决方案是将 rotate(0.0001deg)
添加到缩放变换中。这大大降低了影响,但并没有完全消除它。然而,这是我所能期望的最好的结果,所以我接受它作为答案。
关于javascript - 带有 CSS 过渡的 Firefox 中奇怪的像素移动/跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24854640/