title: Absolute positioned image displays when parent is flipped
body: <p>I've come across a weird bug in Chrome (works fine in Firefox), not sure how to fix it.</p>
  
  <p><a href="http://jsfiddle.net/GkXA7/1/" rel="nofollow">http://jsfiddle.net/GkXA7/1/</a> When hovering over the card the image show's up flipped on the backside of the card. However if I position the image from the right it doesn't happen!? <a href="http://jsfiddle.net/GkXA7/2/" rel="nofollow">http://jsfiddle.net/GkXA7/2/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="flip-container"&gt;
      &lt;div class="flipper"&gt;
          &lt;div class="front card"&gt;
              &lt;img width="40" height="40" src="http://images3.wikia.nocookie.net/__cb20120330024139/logopedia/images/d/d7/Google_Chrome_logo_2011.svg"&gt;
              &lt;h3&gt;Front&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="back card"&gt;
              &lt;h3&gt;Back&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Flip Effect */
  .flip-container {
      perspective: 1000;
      margin: 0 auto 20px;
  }
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
  }
  .flip-container {
      width: 400px;
      height: 200px;
  }
  /* flip speed goes here */
  .flipper {
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative;
      -webkit-transform-style: preserve-3d;
  }
  /* hide back of pane during swap */
  .flipper .card {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      text-align: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 200px;
  }
  .flipper .front{
      background-color:green;
  }
  .flipper .back{
      transform: rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
      background-color:red;
  }
  .front img{
      position: absolute;
      top:10px;
      left:10px;
  }
  </code></pre>
  
  <p>Is there a way to prevent the image from appearing on the flip side while still being able to position it absolutely?</p>