title: CSS 3 transition to move element off screen behaves differently in Firefox
body: <p>I have a case where the CSS 3 transition behaves differently in Firefox than in Chrome or Safari.  The example can be found at <a href="http://jsfiddle.net/inuwan/StKVQ/1/" rel="nofollow">http://jsfiddle.net/inuwan/StKVQ/1/</a></p>
  
  <p>I have 3 implementations that are slightly different, only the 2nd one (move2) will work in Firefox properly.  I have a div that I am transitioning left off-screen and then changing its contents and then transitioning the same div to the middle of the screen from right off-screen.</p>
  
  <p>In case 1 (move1) - works in Chrome/Safari only.  The div transitions correctly left off-screen.  However in Firefox when transitioning the div back to the middle of the screen, it does not slide in but simply just appears.</p>
  
  <p>In case 2 (move2) - code that removed a css class so that an element will transition to the left from right off-screen was inline in case 1.  In case 2 that code has now been wrapped in an additional setTimeout with a 2 second delay.  Now works in Firefox, Chrome, and Safari.</p>
  
  <p>In case 3 (move3) - Same as case 2 but added a document.body.style.overflowX = 'hidden' so that the horizontal scrollbar is not visible and changing as we transition the div. This causes the transition of the div left off-screen to not slide in Firefox, the div simply dissappears.</p>
  
  <p>Is there a reasoning behind the difference or its just one of those quirky things you have to be aware of?</p>