使用十进制像素和 css 过渡的图像渲染答案

【问题标题】：Image rendering with decimal pixels and css transition使用十进制像素和 css 过渡的图像渲染
【发布时间】：2016-11-01 16:21:12
【问题描述】：

如果使用 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;
}

有什么办法吗？

【问题讨论】：

与问题无关：您应该可以使用33.3333% 而不是calc(100% / 3)，并且在支持缺少 calc() 函数的旧浏览器时具有相同的效果。

标签： html css

【解决方案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，但轮廓方法不会产生锐化的边缘。

【讨论】：

谢谢！我最后选择了轮廓，似乎是最优雅的解决方案，而且与背面可见性相比，图像渲染看起来更干净

【解决方案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);
}

【讨论】：