1540192 - canvas.imageSmoothingEnabled = "true"; produces undesirable interpolation / banding

Status: NEW

(Core :: Graphics, defect, P3)

Description

[colormatch]

Attachment: stripe.png

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

1. load https://kinoseed.com/
2. click on "Load Image" area, and load the attached "stripe.png"

Actual results:

The loaded image looks choppy it has visible banding.

Expected results:

As the image with a single-pixel stripe is enlarged, and imageSmoothingEnabled is enabled, it is expected to produce smooth gradient.

Note that on PC/Win the interpolation is smooth, but on GeckoView (Firefox and GV-arr used in an app) there is banding.

Comment 1

[colormatch]

Attachment: PhotoMatch.png

Screenshot of PhotoMatch, using GeckoView 67.0.20190325125126 (beta), showing the same problem - banding.

Comment 2

[colormatch]

Attachment: Firefox66.png

For reference - Firefox on PC/Win does not show the same problem.

Comment 3

[colormatch]

Here's example code: http://jsfiddle.net/mL0h8pra/

Comment 4

[Chris Peterson [:cpeterson]]

Sending to the Graphics team's Bugzilla component because this looks like a graphics bug.

Comment 5

[colormatch]

firefox68 (nightly 68.0a1) is affected too.

link for confirmation/test:
http://fiddle.jshell.net/mL0h8pra/show/

source code:
http://jsfiddle.net/mL0h8pra/

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:jbonisteel, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 7

[Lee Salzman [:lsalzman]]

The banding is due to the fact that Skia uses fixed-point math in its bilinear filtering code. Due to the large amount of upscaling required, it is stressing the fixed-point precision limits. There is unfortunately nothing convenient we can do about this that I can think of.

A user workaround would be to create an image with enough of the gradient precomputed that is requires much less extreme upscaling than 100:1.

Comment 8

[colormatch]

(In reply to Lee Salzman [:lsalzman] from comment #7)

The banding is due to the fact that Skia uses fixed-point math in its bilinear filtering code. Due to the large amount of upscaling required, it is stressing the fixed-point precision limits. There is unfortunately nothing convenient we can do about this that I can think of.

A user workaround would be to create an image with enough of the gradient precomputed that is requires much less extreme upscaling than 100:1.

Thanks for looking into it.
Maybe it will be good to have it fixed in the future?
Especially if someone uses the graphics engine for computational reasons.

If I'm not mistaken, Chrome also uses Skia, yet it does not show this problem at least when it comes to "resizing".
They do however show it after you getImageData and then putImageData:

example: http://jsfiddle.net/rj8d6ypv/show/
source code: http://jsfiddle.net/rj8d6ypv/

*note: Firefox 66 for desktop performs perfectly here - no issues.

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The bug has a release status flag that shows some version of Firefox is affected, thus it will be considered confirmed.