title: transform: scale causes strange hairline difference in OSX Chrome on Retina screen
body: <p>I have the following markup:</p>
  
  <pre><code>&lt;div class="page"&gt;
    &lt;div class="listing"&gt;
      &lt;div class="item-wrapper"&gt;
        &lt;a class="item" href="#"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://unsplash.it/560/330/?random"&gt;
          &lt;/div&gt;
          &lt;div class="title"&gt;Item 001&lt;/div&gt;
          &lt;div class="date"&gt;31 May 2016, 10:30&lt;/div&gt;
          &lt;div class="description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. &lt;/div&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    // etc...
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS: </p>
  
  <pre><code>* {
    box-sizing: border-box;  
  }
  
  .page {
    width: 1100px;
  }
  
  /* the 'grid' as you might say */
  .listing {
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }
  .listing .item-wrapper {
    flex: 0 0 calc((100% / 3));
    display: flex;
    padding: 0 15px 30px;
  }
  
  .item {
    position: relative;
    background-color: #fff;
    width: 100%;
    display: block;
    text-decoration: none;
  }
  .item .image {
    overflow: hidden;  
  }
  .item .image img {
    max-width: 100%;
    display: block;
    transition: all 0.3s ease-in-out;  
  }
  
  .item:hover .image img {
    transform: scale(1.1);  
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;  
  }
  
  .page {
    background: #aaa;  
    width: 1100px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /* the 'grid' as you might say */
  .listing {
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
  }
  .listing .item-wrapper {
    flex: 0 0 calc((100% / 3));
    display: flex;
    padding: 0 15px 30px;
  }
  
  .item {
    position: relative;
    background-color: #fff;
    width: 100%;
    display: block;
    text-decoration: none;
  }
  .item .image {
    overflow: hidden;  
  }
  .item .image img {
    max-width: 100%;
    display: block;
    transition: all 0.3s ease-in-out;  
  }
  
  .item:hover .image img {
    transform: scale(1.15);  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
  &lt;div class="listing"&gt;
    &lt;div class="item-wrapper"&gt;
      &lt;a class="item" href="#"&gt;
        &lt;div class="image"&gt;
          &lt;img src="https://unsplash.it/560/330/?random"&gt;
        &lt;/div&gt;
        &lt;div class="title"&gt;Item 001&lt;/div&gt;
        &lt;div class="date"&gt;31 May 2016, 10:30&lt;/div&gt;
        &lt;div class="description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item-wrapper"&gt;
      &lt;a class="item" href="#"&gt;
        &lt;div class="image"&gt;
          &lt;img src="https://unsplash.it/560/330/?random"&gt;
        &lt;/div&gt;
        &lt;div class="title"&gt;Item 002&lt;/div&gt;
        &lt;div class="date"&gt;31 May 2016, 10:35&lt;/div&gt;
        &lt;div class="description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="item-wrapper"&gt;
      &lt;a class="item" href="#"&gt;
        &lt;div class="image"&gt;
          &lt;img src="https://unsplash.it/560/330/?random"&gt;
        &lt;/div&gt;
        &lt;div class="title"&gt;Item 003&lt;/div&gt;
        &lt;div class="date"&gt;31 May 2016, 10:35&lt;/div&gt;
        &lt;div class="description"&gt;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This shows a grid with three items per row. 
  The page is 1100px wide, so a row is 1130px wide (because of the negative margins left and right). This means that one item is 1130 / 3 = 376.6666px wide. 
  When hovering an item, the image grows to 110%. This causes weird behavior in Chrome: a white hairline appears on one or more sides of the image:</p>
  
  <p><a href="https://i.stack.imgur.com/hR9ar.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hR9ar.png" alt="enter image description here"></a></p>
  
  <p>Or the image overflows its container, despite it's <code>overflow: hidden</code> property:</p>
  
  <p><a href="https://i.stack.imgur.com/B48sR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B48sR.png" alt="enter image description here"></a></p>
  
  <p>I've tried to add <code>.item .image img { will-change: transform; }</code> but that doesn't make it better.</p>
  
  <p>I suspect it has something to do with the dimensions of <code>&lt;div class="image"&gt;...&lt;/div&gt;</code>: <a href="https://i.stack.imgur.com/zB1h1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zB1h1.png" alt="enter image description here"></a> </p>
  
  <p>But I don't know <em>what</em> exactly. </p>
  
  <p>Does anyone know how to prevent this kind of subpixel-rounding-artifact? </p>
  
  <p>PS: I'm using Chrome on OSX on a Retina screen. </p>