具有十进制像素和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; 解决了问题，但轮廓方法不会产生尖锐的边缘。

Answer 2

解决该问题的另一种方法是添加translate:transformZ(0)这将强制GPU渲染，从而纠正了我在其中测试的版本（Mac上为Chrome 43.0.2357.132）的跳转。 但是，如果有大量具有过渡的GPU渲染元素，则​​可能导致问题。

http://jsfiddle.net/kudj7zxn/

.opacity img{
    max-width: 100%;
    display: block;
    opacity: 1;
    transition: .25s;
    transform: translateZ(0);
}