Html 使用十进制像素和css转换的图像渲染

如果使用css（不透明度）为具有十进制宽度的元素中的图像设置动画，则图像将以固定的像素宽度加载，然后在完成转换后将大小更改为正确的十进制像素

我只在Chrome上测试过这个。请参阅小提琴，它仅在使用css动画时显示问题

---

有没有办法解决这个问题？

我解决了添加

轮廓：1px透明固体

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

叉子：

同时
背面可见性：隐藏但轮廓方法不会创建锐化的边缘。
我解决了添加
轮廓：1px透明实体

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

叉子：

同时
背面可见性：隐藏但轮廓方法不会创建锐化的边缘。
另一种解决方法是添加
translate:transformZ（0）
这会强制GPU渲染，从而纠正我测试的版本（Mac上的Chrome 43.0.2357.132）中的跳跃。但是，如果存在大量具有转换的GPU渲染元素，则可能会导致问题


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


与问题无关：与
calc（100%/3）
相反，您应该能够执行
33.3333%
，并且在支持缺少calc（）函数的旧浏览器时具有相同的效果。与问题无关：与
calc（100%/3）
相反，您应该能够执行
33.3333%
，并且在支持缺少calc（）函数的旧浏览器时具有相同的效果。谢谢！最后我选择了轮廓，这似乎是最优雅的解决方案，而且图像渲染与背面可视性相比似乎更干净谢谢！我最终选择了轮廓，这似乎是最优雅的解决方案，而且与背面可见性相比，图像渲染似乎更清晰
.opacity img{
    max-width: 100%;
    display: block;
    opacity: 1;
    transition: .25s;
    transform: translateZ(0);
}