title: CSS: Problems when using object-fit and transform together on webkit
body: <p>I'm trying to use both the css property <code>object-fit: cover</code> on an <code>img</code> element to have my image filling its containing <code>div</code> and <code>transform: scale(xx)</code> to have the image zooming out on hover.</p>
  
  <p>Here is a sample fiddle: <a href="https://jsfiddle.net/96kbuncq/">https://jsfiddle.net/96kbuncq/</a><br>
  Edit: sample with real images: <a href="https://jsfiddle.net/96kbuncq/3/">https://jsfiddle.net/96kbuncq/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
     &lt;div class="category"&gt;
        &lt;img src="http://placehold.it/1200x950&amp;text=1200x950+-+Category+1+-" /&gt;
     &lt;/div&gt;
     &lt;div class="category"&gt;
        &lt;img src="http://placehold.it/1200x950&amp;text=1200x950+-+Category+2+-" /&gt;
     &lt;/div&gt;
     &lt;div class="category"&gt;
        &lt;img src="http://placehold.it/1200x950&amp;text=1200x950+-+Category+3+-" /&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.....
  
  div.category img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  /* Transformations */
  
  div.category img {
    transition: transform 0.35s;
    transform: /*translateZ(0)*/ scale(1.12);
  }
  
  div.category:hover img {
    transform: /*translateZ(0)*/ scale(1);
  }
  </code></pre>
  
  <p>This is working fine in Firefox but in Chrome and Opera I have the following problems:</p>
  
  <ul>
  <li>When hovering the first <code>div</code>, the two others are also affected (and when hovering the second one, the third one is also affected),</li>
  <li>When hovering a <code>div</code>, the image inside is first entirely displayed (we can see the whole image stretched to fit inside the <code>div</code>) before being correctly zoomed out and "covering" the <code>div</code>.</li>
  </ul>
  
  <p>I don't know how to solve those problems.</p>
  
  <p>About the first problem (affected siblings), I've found other answers saying to use <code>translateZ(0)</code> but when I add this the <code>object-fit: cover</code> is not working anymore (the whole image is stretched to fit inside the <code>div</code>).</p>
  
  <p>Any ideas how to make this work in Chrome ? (Both the <code>object-fit</code> and <code>transform</code> are working as expected when used without the other.)</p>