image-rendering: crisp-edges and smooth values report invalid property value in Chrome

Question

Why would I see this? crisp-edges and smooth should be valid values for the image-rendering property, according to every resource...

I have used both:

img {
    image-rendering: smooth;
}

img {
   image-rendering: crisp-edges;
}

and I get:

Using Chrome Version 92.0.4515.131. Works normally in Firefox.

Yes, both hyphens (in name and value) are present in the correct place.

This appears to be a bug in Chrome, but I wanted to make sure it wasn't me.

Answer 1

As of this writing, Chrome (92.0.4515.159) does not support image-rendering: crisp-edges; but it does support image-rendering: pixelated;.

Firefox (91.0.2), on the other hand, supports image-rendering: crisp-edges; but not image-rendering: pixelated;.

These new values for image-rendering are still a candidate recommendation which may explain why browser support for them is inconsistent. Hopefully once it's an actual recommendation browser vendors will rush to implement full support for it.

For more on what the different image rendering modes are supposed to do according to the spec and how that differs from what browsers actually implement today, see the the MDN docs.

Also possibly of interest to you is the Chromium issue tracking support for crisp edge rendering.