title: Strange Pixel Shifting / Jumping in Firefox with CSS Transitions
body: <h2>The Problem:</h2>
  
  <p>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 <strong><em>after</em></strong> the scale animation completes, then flip the card by clicking on it to observe how the kitten readjust its position and size after the animation as well.</p>
  
  <p>Again, this does not happen in Chrome nor Internet Explorer. Can anyone explain what is causing it or provide a remedy?</p>
  
  <h2>The Fiddle:</h2>
  
  <p><a href="http://jsfiddle.net/XEDEM/1/" rel="noreferrer">http://jsfiddle.net/XEDEM/1/</a></p>
  
  <h2>The Code:</h2>
  
  <pre><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'
      });
  });
  </code></pre>