1909718 - Shaded/filled areas of a graph are not drawn with D2d-Canvas (Was: Problem rendering amcharts5 line graph (HTML canvas issue?) )

Status: RESOLVED FIXED

(Core :: Graphics: Canvas2D, defect)

Description

[Julian Egelstaff]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0
Firefox for Android

Steps to reproduce:

This issue exists on desktop and mobile versions.

Visit this codepen: https://codepen.io/jegelstaff/pen/poXERvo

It is code to display a line graph, using amcharts 5 which uses the HTML canvas element.

Actual results:

Part of the graph does not display. On desktop, the display changes depending on the zoom level in the browser and the resolution of the monitor, but no matter what only part of the graph is shown.

This may be a Firefox issue and not an amcharts 5 issue, since the graph displays perfectly in Chrome and Edge (presumably all Chromium browsers). If it is a Firefox issue, presumably it is a problem in drawing on the canvas?

The graph fails differently on Firefox for Android than Firefox for desktop. The graph works on Chrome on Android. So this is a problem on desktop and mobile versions.

Expected results:

The full graph should have displayed (try Chrome to see it normally)

Comment 1

[Julian Egelstaff]

I have opened a related issue with Amcharts: https://github.com/amcharts/amcharts5/issues/1633

Comment 2

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Mayank Bansal]

I can reproduce this with both d2d-canvas and gpu-canvas.
With D2d-canvas, prior to the regression the graph was drawn completely correct (including the shaded/filled parts).

Bisection:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=440856ffde519ea98b6c1fca7d461c20cc55a90c&tochange=ef0d179e0aeb0bb18be03786361046fb661ad64f

Suspect: bug 1804952

Comment 4

[Mayank Bansal]

Attachment: Reporters Standalone Testcase.html

Comment 5

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 1804952

:jrmuizel, since you are the author of the regressor, bug 1804952, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 6

[Jeff Muizelaar [:jrmuizel]]

I can reproduce this with accelerated canvas turned off which shouldn't be hitting the code from bug 1804952. Maybe it's something else?

Comment 7

[Mayank Bansal]

Correction: with gpu-canvas/skia-canvas, hte graphs dont draw at all. Filed bug 1909796
Bisection range was found with d2d-canvas.

Comment 8

[Mayank Bansal]

Attachment: Skia VsD2d Vs Chrome.png

Comment 9

[Jeff Muizelaar [:jrmuizel]]

Attachment: A canvas-rr recording of the problem

Comment 10

[Julian Egelstaff]

Hello,

The creators of amcharts have identified the 'cause' of the issue, at least in as far as the top level JS code goes. A change to the JS 'fixes' the issue, but it is still true that in Firefox the original code does not render a graph properly but it does render properly in other browsers, so there would still seem to be an underlying issue in Firefox that deserves attention.

You can read the crux of the matter here: https://github.com/amcharts/amcharts5/issues/1633#issuecomment-2249530007

The problem is that the upper end of the specified range for the highlighted portion of the graph, is super high. That was done as a cheap way of ensuring all the data above a certain amount would be highlighted. The graph is generated dynamically in its real world location, and so the specific upper end will vary as the data varies. So having a huge upper end for the highlighted portion was a cheap way around having to deduce the real top end. (This was the line in the JS: endValue: value * 10000000)

However, the amcharts folks provided a change to the JS that avoids this issue by easily gathering the true max value in the graph. I have made another code pen that is the same as the first except for this change: https://codepen.io/jegelstaff/pen/xxoEaRy

The second codepen does render properly in Firefox, desktop and mobile. Yay!

It would seem that something about the rendering to the canvas gets tripped up by the hugh upper bound of the highlighted part of the graph. Presumably it is exceeding some threshold of some kind and Firefox just decides not to do anything at all. Perhaps it is possible to truncate extreme values to the limit of the possible workable values, and then everything will just work?

Thank you everyone for your attention on this issue, and thank you for Firefox!
--Julian

Comment 11

[Jeff Muizelaar [:jrmuizel]]

Attachment: Reduced recording of the issue

It looks like the problem is related to the large coordinates in the clip path:

    ["$2", "beginPath", []],
    ["$2", "moveTo", [-1697, -500]],
    ["$2", "lineTo", [-1697, 1000]],
    ["$2", "lineTo", [3394, 1000]],
    ["$2", "lineTo", [3394, -500]],
    ["$2", "lineTo", [-1697, -500]],
    ["$2", "moveTo", [0, -6091968027.988889]],
    ["$2", "lineTo", [1438, -6091968027.988889]],
    ["$2", "lineTo", [1438, 112.81423611111113]],
    ["$2", "lineTo", [0, 112.81423611111113]],
    ["$2", "lineTo", [0, -6091968027.988889]],
    ["$2", "clip", []],

Comment 12

[BugBot [:suhaib / :marco]]

Set release status flags based on info from the regressing bug 1804952

Comment 13

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit BugBot documentation.

Comment 14

[Lee Salzman [:lsalzman]]

Attachment: Bug 1909718 - Guard against lossy PathSkia::AsRect conversions. r?aosmond

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8a003ad03d28
Guard against lossy PathSkia::AsRect conversions. r=aosmond

Comment 16

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/8a003ad03d28

Comment 17

[Mayank Bansal]

This is fixed for me on the latest Nightly (Win11x64 desktop with d2d/gpu canvas).

Comment 18

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:lsalzman, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox130 to wontfix.

For more information, please visit BugBot documentation.