title: Google Chrome Strange Css3 Transition Bug
body: <p>Im Facing a very strange bug in Google Chrome.</p>
  
  <p><a href="http://jsfiddle.net/y6uY7/" rel="nofollow"><strong>Fiddle</strong></a></p>
  
  <p>Here is my Code</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div class="trans"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  body {
      background:green;
      overflow: hidden;
  }
  
  .trans {
      width: 155550px;
      height: 200px;
      background: #000;
      position: relative;
      -webkit-transition-property:-webkit-transform, left, top;
      -webkit-transition-duration:0.600s;
      -webkit-transform:translate3d(0px,0,0);
      -webkit-transition-timing-function:ease-in-out;
  
  }
  #wrapper:hover .trans {
          -webkit-transform:translate3d(-155550px,0,0);
  }
  </code></pre>
  
  <p>When you hover on wrapper div and transition starts the background flicks to show transparent area. Any Solution For that bug?. Im using Latest version of Google Chrome on Win8</p>
  
  <p>Thanks </p>
  
  <p><strong>Update :</strong>
  This is what im going to achieve for user who want to know what actually im making</p>
  
  <p><strong><a href="http://jsfiddle.net/vpdpX/" rel="nofollow">http://jsfiddle.net/vpdpX/</a></strong></p>