title: CSS rotate transform makes image blurry
body: <p>I created an octagon clipped style using CSS transform rotate and scale as the code snippet below.</p>
  
  <p>However, when looking in Chrome 52.0.2743.116 (64-bit) on El Capitan, the image looks blurry. On the contrary, the image looks sharp in Firefox.</p>
  
  <p>I have tried all kinds of solutions such as <code>backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;</code>. Yet the image is still blurry.</p>
  
  <p>Is there any webkit specific rules that I can use to fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.octagon {
    display: inline-block;
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
    -moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
    -ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
    -o-transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
    transform: rotate(22.5deg) scale(0.9) translateY(-4px) translateZ(0);
    margin-top: 1em;
    margin-bottom: 1em;
  }
  div.octagon &gt; * {
    position: relative;
    overflow: hidden;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background: transparent;
    border: 4px solid;
    margin: 0;
    background-color: black;
  }
  div.octagon &gt; *:after {
    position: absolute;
    /* There needs to be a negative value here to cancel
         * out the width of the border. It's currently -3px,
         * but if the border were 5px, then it'd be -5px.
         */
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
    border: inherit;
  }
  div.octagon &gt; * &gt; img {
    display: block;
    -webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
    -moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
    -ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
    -o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
    transform: rotate(-67.5deg) scale(1.1) translateZ(0);
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
  }
  .col-6 {
    display: inline-block;
    width: 49%;
  }
  .col-6 &gt; .octagon {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-6"&gt;
    &lt;div class="octagon"&gt;
      &lt;p&gt;
        &lt;img src="https://placeimg.com/300/300/people" width="500" height="500" /&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-6"&gt;
    &lt;img src="https://placeimg.com/300/300/people" width="300" height="300" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>