Strange pixel offset / jumps in Firefox with CSS transitions

Question

Problem:

I use CSS to flip the card and show the kitten. There is a behavior that, apparently, exists only in Firefox, due to which it constantly moves / resizes images by several pixels. Just move the mouse pointer over the map back and see how it moves around the small one after , the scale animation ends, then flips the map over, clicking on it to watch the kitten adjust its position and size after the animation.

Again, this does not happen in Chrome and Internet Explorer. Can someone explain what causes it or provide a remedy?

Scenario:

http://jsfiddle.net/XEDEM/1/

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

Answer 1

After some hard research, this is a known issue with the Firefox sub-pixel support. More obvious demonstrations of the effect can be found here and here . The phenomenon is referred to as a “click of a pixel," and this happens quite often in Firefox animations, especially when the transition is complete.

The solution, also proposed in the Bugzilla thread, is to add rotate(0.0001deg) to the scaling transformation. This significantly reduces the effect, but does not completely eliminate it. However, this is the best I can hope for, so I accept this as an answer.