html - 使用十进制像素和 css 过渡的图像渲染

Question

如果元素中具有小数宽度的图像使用 css(不透明度)进行动画处理，则图像以固定像素宽度加载，然后在完成过渡后将大小更改为正确的小数像素。

我只在 Chrome 上测试过这个。请参阅 fiddle ，它仅在使用 css 动画时显示问题。 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;
}

有什么办法解决这个问题吗？

Answer 1

我解决了添加 outline: 1px transparent solid;

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

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

还有 backface-visibility: hidden; solves the issue但轮廓方法不会创建锐化边缘。