Wrong bounding boxes on Firefox since Release 82

[mnowakow]

Describe the problem
Interacting with the Verovio rendered SVG causes problems, since the bounding boxes (Element.getBoundingClientRect() and SVGGraficsElement.getBBox()) are sized up to the respective right and bottom bound of the current SVG.
This problem only occurs with Firefox since Release 82 (Current Release: 93)

To Reproduce
Steps to reproduce the behavior:

1. Load an arbitrary MEI with Verovio (e.g. the tutorial)
2. Use a Firefox Release >= 83 && <= 93
3. Check SVG Element in browser inspector (e.g. document.querySelector(".measure"), or document.querySelector(".layer)

Expected behavior
The example statements should only display the bounding box visually displayed for the element (measure, staff, etc.)

Verovio information

• 3.6.
• Javascript

Environment information (as appropriate)

• MacOS 11.5.2, Windows10
• Firefox (Release >= 83 && <= 93)

Screenshots
Displayed Bounding Box in Firefox 93 after executing document.querySelector(".staff") (first staff) in browser console

Additional context
This problem was already reported to mozilla 10 Months ago.
It is not yet clear if it is a problem with Verovio or with Firefox

[rettinghaus]

This is pretty much a Firefox issue, because in Safari and Chrome everything works fine and as expected.

[craigsapp]

This could be related to issue humdrum-tools/verovio-humdrum-viewer#600 where Firefox was not giving the correct bounding box information for a system. In this case it was a bug in Firefox and I had to adapt my code to compensate.

I have been getting an unrelated strange SVG behavior in Chrome which I will report soon...

[WolfgangDrescher]

As a workaround --svg-bounding-boxes can be used to calculate the correct bounding boxes. Note that .note.bounding-box currently only covers the note head (see #3368).