title: Why transition:opacity affects on padding in % (in -webkit- browsers)
body: <p>Some strange behaviour was noticed in -webkit- browsers. If padding is given in "%" and we apply transition:opacity effect on children, the children is affected at the and of the action. If padding is in px (or em) everything is ok. The problem is only in -webkit-  browsers.
  HTML</p>
  
  <pre><code>&lt;div class="red"&gt;
      &lt;div class="blue"&gt;
          padding in %
      &lt;/div&gt;    
  &lt;/div&gt;
  &lt;div class="red1"&gt;
      &lt;div class="blue"&gt;
          padding in px
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.red{
      background-color: red;
      width:100px;
      height:100px;
      padding: 5%;
  }
  .red1{
      background-color: red;
      width:100px;
      height:100px;
      padding: 20px;
      margin-top: 5px;
  }
  .blue{
      background-color: blue;
      height:100px;
      opacity: 1;
  }
  .blue:hover{
      opacity:0.5;
      transition: opacity 0.5s linear;
  }
  </code></pre>
  
  <p>And example: <a href="http://jsfiddle.net/48jUg/3/" rel="nofollow">http://jsfiddle.net/48jUg/3/</a></p>
  
  <p>P.S. The problem is seems to appear when browser window's wide is between 1050 and 1200 px</p>