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; solves the issue但大纲方法不会创建锐化边缘。

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);
}

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

2 个答案: