title: Chrome image opacity transition on width using percent cause resize flikering
body: <p>Here's the html simplified sample</p>
  
  <pre><code>&lt;div class="big"&gt;
      &lt;a href="....."&gt;
          &lt;img src="....."&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.big {
      width: 33.3333%;
  }
  img:hover {
      opacity: 0.9;
      transition: opacity 0.4s;
  }
  </code></pre>
  
  <p>When I hover above img, the opacity transition works fine, but the image flickering on span 0.4s, it's like resizing, like the Chrome recalculate the percentage size again within 0.4s.</p>
  
  <p>Tried webkit transition, not fixing anything. Transition all, still happening.</p>
  
  <p>This problem only happen on Chrome, no problem at all on Firefox.
  Only happen when using percentage, with fixed width works fine, but I need to use percentage on this one.</p>
  
  <p>Thanks for any help</p>