title: CSS card flip animation goes behind the other card in Safari/Firefox
body: <p>I have two cards on the screen and when one of them flips, the backside ends up behind the other card in Safari. The same is not true for Chrome. And in Firefox, it temporarily goes behind the other card but then pops forward. Any help would be appreciated!</p>
  
  <p>Drag the card and then, click the black bar to flip it.</p>
  
  <p>Here's the html...</p>
  
  <pre><code>&lt;div id="flipStage"&gt;
      &lt;div class="card" id="bsg"&gt;
          &lt;div class="front" id="bsgFront"&gt;&lt;/div&gt;
          &lt;div class="back" id="bsgBack" style="color: green;"&gt;f&lt;/div&gt;
          &lt;div class="flipButton"&gt;&lt;/div&gt;
          &lt;div class="handle"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card" id="vger"&gt;
          &lt;div class="front" id="vgerFront"&gt;&lt;/div&gt;
          &lt;div class="back" id="vgerBack" style="color: green;"&gt;f&lt;/div&gt;
          &lt;div class="flipButton"&gt;&lt;/div&gt;
          &lt;div class="handle"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/gJaCP/8/" rel="nofollow">Here's a fiddle with CSS and JS that works in Chrome, sorta in Firefox and not in Safari</a></p>