title: CSS transition padding glitch in webkit browsers
body: <p>When I use padding in a css transition, webkit browsers (safari osx, Chrome osx &amp; Chrome windows) have a little glitch at the start and the end of each transition, resulting in a 1px movement of elements placed after the animated element.</p>
  
  <p><a href="http://jsfiddle.net/QG4QV/19/" rel="nofollow noreferrer">http://jsfiddle.net/QG4QV/19/</a></p>
  
  <p>HTML</p>
  
  <pre><code>test test test &lt;span class="test"&gt;Hover me&lt;/span&gt; test test test test
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.test{
    color:#FFF;
    background:#000;
    padding:4px 4px 4px 30px;
    transition: padding 0.5s linear;
  }
  
  .test:hover{
    padding:4px 30px 4px 4px;
  }
  </code></pre>
  
  <p>I've searched and tried various solutions, but nothing solves this example?!
  <a href="https://stackoverflow.com/questions/18921525/css-transition-glitch">CSS transition glitch</a>
  <a href="https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome">CSS transition effect makes image blurry / moves image 1px, in Chrome?</a></p>
  
  <p>(Example filled with possible solutions: <a href="http://jsfiddle.net/QG4QV/18/" rel="nofollow noreferrer">http://jsfiddle.net/QG4QV/18/</a> , but nothing works)</p>