图像渲染:清晰的边缘和平滑的值在Chrome中报告无效的属性值。

Question

为什么我会看到这个？crisp-edges和smooth应该是image-rendering属性的有效值，根据每个资源.

我用过两种方法：

img {
    image-rendering: smooth;
}

img {
   image-rendering: crisp-edges;
}

我得到了：

​

​

使用Chrome版92.0.4515.131。在Firefox中正常工作。

是的，两个连字符(在名称和值上)都在正确的位置。

这似乎是Chrome的一个bug，但我想确定不是我。

Answer 1

在本文撰写之时，Chrome (92.0.4515.159)不支持image-rendering: crisp-edges;，但它确实支持image-rendering: pixelated;。

另一方面，Firefox (91.0.2)支持image-rendering: crisp-edges;，但不支持image-rendering: pixelated;。

image-rendering的这些新值仍然是一个候选人推荐，这可以解释为什么浏览器对它们的支持是不一致的。希望一旦它成为一个实际的推荐浏览器供应商将急于实现对它的充分支持。

要了解更多关于不同的图像呈现模式应该根据规范所做的事情，以及这与当前浏览器实际实现的不同之处，请参见MDN文档。

你还可能感兴趣的是清晰边缘渲染的铬问题跟踪支持。

Answer 2

这是因为该属性被编写为“图像呈现”，而不是image-rendering，而且它是脆边。

在这里，一个属性的兼容性表-边缘值: https://caniuse.com/?search=image-rendering

您可以看到，这是自41版以来由chrome支持的属性。