The Problem:

I'm using CSS to make a card flip around and show a kitten. There is a behavior that seems to only exist in Firefox whereby it is constantly shifting / resizing the images by a few pixels. Simply hover over the card back and watch as it moves around a little after the scale animation pletes, then flip the card by clicking on it to observe how the kitten readjust its position and size after the animation as well.

Again, this does not happen in Chrome nor Internet Explorer. Can anyone explain what is causing it or provide a remedy?

The Fiddle:

/

The Code:

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

The Problem:

I'm using CSS to make a card flip around and show a kitten. There is a behavior that seems to only exist in Firefox whereby it is constantly shifting / resizing the images by a few pixels. Simply hover over the card back and watch as it moves around a little after the scale animation pletes, then flip the card by clicking on it to observe how the kitten readjust its position and size after the animation as well.

Again, this does not happen in Chrome nor Internet Explorer. Can anyone explain what is causing it or provide a remedy?

The Fiddle:

http://jsfiddle/XEDEM/1/

The Code:

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

• javascript
• jquery
• html
• css

• 1 Not reproducible in FX [33.0a1 (2014-07-03)] for Mac – Sarbbottam Commented Jul 20, 2014 at 20:42
• 2 Installed latest Nightly (33.0a1) on a second puter (PC); still occurs. Absolutely reproducible. Also occurs via BrowserStack. testing, so it's not limited to my setups. Evidently you guys just don't see what it is I'm referring to. You have to pare it to Chrome because it's a very subtle effect that occurs after the animation pletes. The images are moved and resized ever-so-slightly (by about 1 pixel). – daveycroqet Commented Jul 20, 2014 at 21:58
• For even more proof, observe its behavior without the scaling effect applied. The problem disappears. jsfiddle/XEDEM/3 – daveycroqet Commented Jul 20, 2014 at 22:10

1 Answer 1

After some ardent research, this is a known issue with Firefox's sub-pixel rendering. More obvious demonstrations of the effect can be found here and here. The phenomenon is referred to as "pixel snapping" and it occurs rather frequently in Firefox's animation, particularly at the conclusion of a transition.

The solution, which is also proposed in the Bugzilla thread, is to add rotate(0.0001deg) to the scaling transform. This greatly reduces the effect but does not entirely eliminate it. However, it is the best I can hope for, so I'm accepting it as the answer.