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

user_1253298 0
Viewed 866

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:

enter image description here

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.

css image
2 Answers

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.

user_9511590

This is because the property is written as 'image rendering' and not image-rendering and it's crisp-edges

Here a table of compatibility of the property for the crips-edges value : https://caniuse.com/?search=image-rendering

You can see that is a property supported by chrome since version 41.

user_166522750
Related