CSS rotate transform makes image blurry

Question

I created an octagon clipped style using CSS transform rotate and scale as the code snippet below.

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.

I have tried all kinds of solutions such as backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;. Yet the image is still blurry.

Is there any webkit specific rules that I can use to fix this?

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 > * {
  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 > *: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 > * > 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 > .octagon {
  width: 100%;
}

<div class="col-6">
  <div class="octagon">
    <p>
      <img src="https://placeimg.com/300/300/people" width="500" height="500" />
    </p>
  </div>
</div>

<div class="col-6">
  <img src="https://placeimg.com/300/300/people" width="300" height="300" />
</div>

Answer 1

I just tested this on my comp, and it looks better when I applied image rendering pixelated instead the -webkit-optimize-contrast.

div.octagon > * > img {
  image-rendering: pixelated;
}