`image-rendering:pixelated` not working as documented when downscaling
Categories
(Firefox :: Untriaged, defect)
Tracking
()
People
(Reporter: 543080122, Unassigned)
Details
Attachments
(2 files, 5 obsolete files)
Result.png
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Steps to reproduce:
The rendering method pixelated is (according to https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering)
When scaling the image up, the nearest-neighbor algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as auto.
Actual results:
It also affect downscaling incorrectly
Expected results:
It should not touch downscaling
|
||
Comment 3•3 years ago
|
||
Looks like the documentation is wrong. The specification says nothing about downscaling: https://drafts.csswg.org/css-images/#the-image-rendering
(In reply to Robert Longson [:longsonr] from comment #3)
Looks like the documentation is wrong. The specification says nothing about downscaling: https://drafts.csswg.org/css-images/#the-image-rendering
As shown in the image attachment, pixel art looks much better when scale up with nearest neighbor
But when talking about downscaling, It lost too much information that you barely understand what that emoji is if nearest neighbor is used
That's when smoother algorithm should be used as mentioned in the w3c doc
but allows minor smoothing instead of awkward distortion when necessary.
|
||
Comment 6•3 years ago
|
||
I'm fairly confused. The attached HTML doesn't use image-rendering at all? Neither pixelated nor -moz-crisp-edges. Can you attach a test-case that uses it so that I can take a closer look?
Note that we didn't use to implement image-rendering: pixelated at all, so perhaps this is a regression from bug 856337?
(In reply to Emilio Cobos Álvarez (:emilio) from comment #6)
I'm fairly confused. The attached HTML doesn't use
image-renderingat all? Neitherpixelatednor-moz-crisp-edges. Can you attach a test-case that uses it so that I can take a closer look?Note that we didn't use to implement
image-rendering: pixelatedat all, so perhaps this is a regression from bug 856337?
Sorry I must be messed it up in the last upload, updated the html demo now
I checked bug 856337, it said pixelated was implemented in build 93.0a1 (20210903160420), I downloaded 94.0a1 (20211002213629) and tested it with the demo, but when using image-rendering: pixelated, downscaled image is still jagged
I'm not sure what's going on here, is it me downloaded the wrong version that didn't fixed the issue or this is the final state of pixelated that Mozilla thinks how it should works?
fix wrong content type... 🤦♂️
|
|
||
Comment 10•3 years ago
|
||
What were you using in comment 1 to get that rendering in 92b9? Pixelated obviously didn't parse then, were you using crisp-edges? something else?
|
Reporter | |
Comment 11•3 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)
What were you using in comment 1 to get that rendering in 92b9? Pixelated obviously didn't parse then, were you using crisp-edges? something else?
I tested it again, you're right, pixelated is not implemented then, I must be mixed it with wrong memory or something
What happened is that I was using img {image-rendering: pixelated;} in userContent.css all the time, waiting for its implementation. It was too long that I forget about it already, so when 93 finally implement pixelated after all but not in the way I expected, I noticed its bad downscaling right away.
So this is a bug about pixelated but not a regression one
|
|
Reporter | |
Comment 12•3 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #10)
What were you using in comment 1 to get that rendering in 92b9? Pixelated obviously didn't parse then, were you using crisp-edges? something else?
|
|
||
Comment 13•3 years ago
|
||
Ok, then I think this is just bug 1731134. When downscaling we could use a better algorithm
Description
•