CSS rotate transform делает изображение размытым

Question

Я создал восьмиугольный обрезанный стиль с использованием CSS-преобразования, вращающегося и масштабируемого в качестве фрагмента кода ниже.

Однако при взгляде на Chrome 52.0.2743.116 (64-bit) на El Capitan изображение выглядит размытым. Напротив, изображение выглядит четким в 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; 
}