title: Css transition div shaking
body: <p>Why when I use position absolute and percentage width I have this glitch when I hover on div  above?
  There is example. I have this glitch on little more complicated site.</p>
  
  <pre><code>&lt;div class="box"&gt; text &lt;/div&gt;
  
  &lt;div class="container"&gt;
  
  
  &lt;div&gt;
  
  .box {
      width: 50%;
      height: 50%;
      background: red;
  }
  .box:hover {
      transition: 0.5s;
      -webkit-transform: translate(0, 6px);
  
  }
  .container {
      position:absolute;
      top:40px;
      width:40%;
      height:50px;
      float:left;
      background: blue;
      color:white;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/TsUEH/" rel="noreferrer">http://jsfiddle.net/TsUEH/</a></p>
  
  <p>When you hover on red text then width of blue div are shaking.
  How can i avoid this without removing percentage and position absolute?</p>