图像渲染与小数像素和CSS转换

Question

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

我只在Chrome上测试了这个.请参阅小提琴,仅在使用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;
}

福克:http://jsfiddle.net/0dvvd1n1/

也backface-visibility: hidden; 解决了问题,但轮廓方法不会创建锐化的边缘.