615042 - pixel interpolation error

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[jonathan chetwynd]

when pixels are defined, and the display is rendered at an alternative scale,
it is vital that interpolation is accurate.

in the attached example, which is simple to understand but not a reduced
testcase, a gradient matrix is interpolated using lerp, pixel by pixel, across a defined width and height.

in this instance for simplicity, the root is deliberately set as a percentage,
however zooming would also have a similar effect.

currently all though there is variation, Opera, Mozilla and Webkit nightlies
all display significant artefacts.

interpolation does take processing, and it may be that authors will need to
consider this, none the less the browser should not introduce artefacts.

errata filed with W3C
http://www.w3.org/Bugs/Public/show_bug.cgi?id=11417

Comment 1

[jonathan chetwynd]

Attachment: testcase: note banding

Comment 2

[jonathan chetwynd]

Attachment: webkit-mozilla-opera screengrab

Comment 3

[Robert Longson [:longsonr]]

What happens if you set shape-rendering? http://www.w3.org/TR/SVG/painting.html#ShapeRenderingProperty geometricPrecision is likely what you want though you could try the others.

Comment 4

[jonathan chetwynd]

Robert,

no discernable effect in any browser, good call, but dont think it is relevant to this case:
" it renders vector graphics elements such as ‘path’ elements and basic shapes such as circles and rectangles"

this bug is pixel level, but scaling rather than calculating a path.

I would expect some artefacts when scaling, but not banding shown by all three browsers.
may be 'beats' as lerp is used, by  script and browser, 
hence perhaps need to include lerp in language?
to avoid...

Comment 5

[Robert Longson [:longsonr]]

I don't see any banding or artifacts on Windows on either Firefox 3.6 or trunk. What platform are you seeing this on?

Comment 6

[jonathan chetwynd]

Attachment: fixed width, pronounced banding in Mozilla, not opera nor webkit

Comment 7

[jonathan chetwynd]

Attachment: pronounced banding, fixed width not percentage

Comment 8

[jonathan chetwynd]

did you zoom in  to the maximum ~ 5 times?

do you have a large screen?

please check further testcase...

os x here

Comment 9

[Robert Longson [:longsonr]]

I do see banding in some examples on Windows, however setting shape-rendering="crispEdges" on the outer svg node or the g node fixes it as I would expect.

Comment 10

[Robert Longson [:longsonr]]

Attachment: first testcase with shape-rendering="crispEdges"

Comment 11

[Robert Longson [:longsonr]]

Does this testcase work for you Jonathan?

Comment 12

[jonathan chetwynd]

Attachment: crispEdges doesnt work, maybe 'worse'

Comment 13

[jonathan chetwynd]

Robert,

unfortunately one cant prove a negative, and so a single exception is enough.
by which I mean that setting crispEdges on windows and not seeing the effect, is not sufficient, one has to try zooming etc, change values in testcase etc.
then and only then one has a reasonable sense that the issue is resolved.

my experience so far is that almost any setting produces some artefacts in the three browsers. this can be mitigated to a small extent, but there is an underlying issue, that needs to be addressed.

otherwise the scaling is a figment.

Comment 14

[Robert Longson [:longsonr]]

Setting Mac only as I can't get anything to break on Windows with crispEdges.

Comment 15

[Robert Longson [:longsonr]]

Seems OK now on a Mac providing you set crispEdges.