title: CSS translate with percentage causes blurred image
body: <p>I've encountered this very annoying problem.</p>
  
  <p>When you align an image with transform, translate percentage based it causes the image to blur slightly. This is only with <strong>percentage</strong> alignment</p>
  
  <p>Consider this css:</p>
  
  <pre><code>img {
    display: block;
    height: auto;
    max-width: 100%;
    transform: translate(1%,1%); 
  }
  </code></pre>
  
  <p>Tried solutions:</p>
  
  <ol>
  <li>translate3d fix</li>
  <li>perspective fix</li>
  <li>translateZ fix</li>
  </ol>
  
  <p>Maybe somebody has an solution?</p>
  
  <p><a href="https://jsfiddle.net/fsvbbucL/1/" rel="noreferrer">Updated: Js Fiddle</a>
  I updated the js fiddle with an image to better see the difference. It is very noticeable in photography.</p>
  
  <p><strong>Example image:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/eRjov.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eRjov.png" alt="enter image description here"></a></p>
  
  <p>Thanks!</p>