[Bug] Cannot reduce legend line-height in Firefox

[benjarobin]

Version

6.1.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=area-stack&code=xVVNj5swEL3vrxipBy45BNikgaqHaLv9OFSqlG17qPYwCROwChgZsxta5b93xgTYJFKkSiuFA9jjmfG898ZGV1bpEt7D3xsAq2xOsRvyhHY2Bm9lcfObElgaQrjL0FiPl_cTcdc6t6oaAoxKUzIcgztVe-IBIMNvWpVWFjo_9mwr3sbbGF33fgA5rikffQDWvHFqdFMmdzrXkvfNHN9Gi5kUIM_efeXtykmNSvr4nLZc_HzaJefCMp7ODtO1tlYXMfihM7jgnFIqh_AELcbwy7svUOXeBLzvpbC0TLhc8H6ohHQ_-aAMbayMVoRmk8F9maqSvMdur2eV2CyGoN9bWSo-U1fPfNhduF7ZdiQ_5xS9m38I3erSrtQf9lmMgSzBWu_6sC2hbcyQBaDGJ1rWXwpMxXhC2G7J4jBMZz3VBi2l2rSDPGsRAk37CVnwLeY19Ss9WV91KTQ8NCSfn5S4WdbI56NRjiLsmGpK73GoxTHVXqjlCXPOeexfk1F0FlBiIQEH2Y6zCKWDrZauZuODtjh6Ivd4L4NjSB4qqgxrKW5sza3eNGzwuiqGfjxhxA-mE26ygF9TX0a3E4jYFHDfQeBPDxR0UScQXjTctWEEDsZCYEQMIxAYgeAIBUd4GceLs3J1OfgMcvWMI3ByzBiHP-C4vYyjP-bXBhGKGKGACAVEKGKEoxjBRRDHN9T_Yzm7outMP8d88TfDZQBQ6VrJP4Wjra7OcLwyHwvhIxI-IuEjEj58152-Y4SPX0-JXB03-3f_AA&enc=deflate

Steps to Reproduce

1. Set legend.itemHeight to a small value (6)
2. Set textStyle.lineHeight to 10px
3. Set textStyle.fontSize to 8.
4. The legend needs a lot of label to be on multiple lines (or the legend width could be limited)
5. Use default font

Current Behavior

It looks like the distance between the 2 legend lines is equal to lineHeight + 8px on both browsers (Firefox and Chromium).
In Chromium, with the provided example, the distance between the 2 lines is 18px as expected.
But, the legend line height in Firefox cannot be reduced under 20px + 8px.
It looks like that the computed transform="translate(...)" attribute for each text and path element of the legend is not "valid" in Firefox.

Expected Behavior

Firefox should have the same layout that Chromium.

Environment

- OS: Arch Linux
- Browser: Firefox 151
- Framework: None

Any additional comments?

No response

[helgasoft]

The SVG renderer displays the actual tag parameters within the chart (F12), but the Canvas renderer does not.
I see identical settings for the legend item text in both browsers in SVG mode:

FF v.151.0.4 (64-bit)
<text dominant-baseline="central" text-anchor="start" style="font-size: 8px; font-family: Microsoft YaHei;" x="30" y="3" transform="translate(255.725 262)" fill="#54555a">Direct</text>

Chrome Version 149.0.7827.102 (Official Build) (64-bit)
<text dominant-baseline="central" text-anchor="start" x="30" y="3" transform="translate(82.7324 459)" fill="#54555a" style="font-size: 8px; font-family: &quot;Microsoft YaHei&quot;;">Direct</text>

Could you please provide parameter comparison from your browsers ?

[benjarobin]

Both lines you provided are not the same: the transform="translate is not the same.
I am talking about the distance between the 2 legend lines, as indicated by the red line that I added to the captured image to be clearer (both graphs are rendered using SVG, but the result is the same with canvas).

Firefox:

<path d="M30 -2l20.45 0l0 10l-20.45 0Z" transform="translate(248.075 212.75)" fill="none"></path>
<text dominant-baseline="central" text-anchor="start" style="font-size: 8px; font-family: sans-serif;" x="30" y="3" transform="translate(248.075 212.75)" fill="#54555a">Email</text>
...
<path d="M30 -2l22.2 0l0 10l-22.2 0Z" transform="translate(248.075 240.25)" fill="none"></path>
<text dominant-baseline="central" text-anchor="start" style="font-size: 8px; font-family: sans-serif;" x="30" y="3" transform="translate(248.075 240.25)" fill="#54555a">Direct</text><path d="M-1 -6.75l53.2 0l0 19.5l-53.2 0Z" transform="translate(248.075 240.25)" fill="none">

The distance in Firefox is 240.25 - 212.75 = 27.5

Chromium:

<path d="M30 -2l20.0039 0l0 10l-20.0039 0Z" transform="translate(326.3809 213)" fill="none"></path>
<text dominant-baseline="central" text-anchor="start" x="30" y="3" transform="translate(326.3809 213)" fill="#54555a" style="font-size: 8px; font-family: sans-serif;">Email</text>
...
<path d="M30 -2l20.8906 0l0 10l-20.8906 0Z" transform="translate(326.3809 231)" fill="none"></path>
<text dominant-baseline="central" text-anchor="start" x="30" y="3" transform="translate(326.3809 231)" fill="#54555a" style="font-size: 8px; font-family: sans-serif;">Direct</text>

The distance in Chromium is 231 - 213 = 18

[benjarobin]

I have additional findings:

• This is not related to the font, I can force a specific font, and I can still reproduce the same issue.
• But this depends on the "screen" when the page is loaded... If the window is moved between the screen, the layout does not change. The layout is computed when the page is first loaded, and it is not the same depending of the "screen".
  • I am under Linux with Wayland (KDE)
  • With a screen "A" of 1920x1080 with a scaling factor of 100%, the delta between the 2 lines in Firefox is ~21px
  • With a screen "B" of 2256x1504 with a scaling factor of 150%, the delta between the 2 lines in Firefox is ~28px
  • With same screen "B" of 2256x1504 but with a scaling factor of 200%, the delta between the 2 lines in Firefox is ~34px
  • If I move the window, loaded from screen "B", to the screen "A", the transform="translate()" are updated, but the height between the lines is kept to 34px (if "B" has a scaling factor of 200%)
• I cannot reproduce this issue under chromium.

[benjarobin]

To make it clear, here is a screenshot when loading the page from screen "B" of 2256x1504 but with a scaling factor of 300%:

The line height is ~47px

[benjarobin]

Well, I cannot reproduce this issue in Firefox under Windows with a scaling factor of 225%. The test was done in a VM, so if an user with a native Windows can confirm that the issue is not present with a scaling factor >= 200%. The distance between the 2 lines should be 18px.

Anyway, if anybody can point to me the JavaScript part that do this computation, this way I could create a minimal reproducible test case and submit a bug report to Mozilla Firefox.