minlare minlare - 1 month ago 5
CSS Question

Image rendering with decimal pixels and css transition

If an image in an element with a decimal width is animated using css (opacity), the image loads at a fixed pixel width then after completing the transition changes size to the correct decimal pixels.

I have tested this on Chrome only. See the fiddle, which shows the problem only when using css animations. http://jsfiddle.net/minlare/kext0af4/

.opacity{
width: 400px;
}
.opacity div {
width: calc(100% / 3);
float: left;
}
.opacity img{
max-width: 100%;
display: block;
opacity: 1;
transition: .25s;
}
.opacity img.visible{
opacity: 0;
}


Any way around this?

Answer

I solved adding outline: 1px transparent solid;

.opacity img{
    max-width: 100%;
    display: block;
    opacity: 1;
    transition: .25s;
    outline: 1px transparent solid;
}

Fork: http://jsfiddle.net/0dvvd1n1/

Also backface-visibility: hidden; solves the issue but the outline approach doesn't create sharpened edges.