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); 
 
    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

我只是測試這對我的補償，它看起來更好，當我申請圖像渲染像素化而不是-webkit-優化對比度。

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