CSS旋转变换使图像模糊

Question

我创建了一个八边形剪裁样式，使用CSS转换旋转和缩放作为下面的代码片段。

但是，在El Capitan上查看Chrome 52.0.2743.116（64位）时，图像看起来很模糊。相反，Firefox中的图像看起来很清晰。

我尝试了各种解决方案，如backface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;。然而，图像仍然模糊。

是否有任何webkit特定规则可用于解决此问题？

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

我只是在我的comp上测试了它，当我应用图像渲染像素化而不是-webkit-optimize-contrast时它看起来更好。

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