CSS回転変換で画像がぼやける

Question

私は、以下のコードスニペットとしてCSSのtransform rotateとscaleを使って八角形のクリッピングスタイルを作成しました。

しかし、El CapitanのChrome 52.0.2743.116（64ビット）を見ると、画像がぼやけて見えます。それどころか、Firefoxでは画像がシャープに見えます。

私のコードスニペットからわかるように、私はbackface-visibility: hidden; transform: translateZ(0); filter: blur(0); image-rendering: -webkit-optimize-contrast;のようなあらゆる種類のソリューションを試しました。まだ画像はまだぼやけています。

この問題を解決するために使用できるウェブキット固有のルールはありますか？

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); 
 
    backface-visibility: hidden; 
 
    -webkit-filter: blur(0); 
 
    filter: blur(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); 
 
    backface-visibility: hidden; 
 
    -webkit-filter: blur(0); 
 
    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); 
 
    backface-visibility: hidden; 
 
    content: ''; 
 
    border: inherit; 
 
    -webkit-filter: blur(0); 
 
} 
 
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; 
 
    -webkit-filter: blur(0); 
 
    backface-visibility: hidden; 
 
    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://im.ages.io/YeowYmMcIm?size=300x300" width="500" height="500" /> 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="col-6"> 
 
    <img src="https://im.ages.io/YeowYmMcIm?size=300x300" width="300" height="300" /> 
 
</div>

Answer 1

私はちょうど私のcompでこれをテストし、私が代わりに-webkit-最適化コントラストをピクセル化画像レンダリングを適用した場合にそれが良く見えます。

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