1783729 - SVGGraphicsElement.getBBox sometimes depends on parent transform

Status: NEW

(Core :: SVG, defect)

Description

[Erik Demaine]

Attachment: getbbox.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Steps to reproduce:

1. Open attached getbbox.html
2. Look in console.

Actual results:

Reported width and height differ substantially, roughly 5x.

untransformed : 0 -44.66666793823242 25 55.33333206176758
transformed : 0 -43.333335876464844 5 10.666666984558105

Expected results:

I expect the reported width and height to be the same / similar, according to the spec and MDN which says that getBBox "does not account for any transformation applied to the element or its parents".

On Chrome, I get:

untransformed : 0 -44.80000305175781 25.066667556762695 55.466670989990234
transformed : -2.6666667461395264 -45.333335876464844 29.33333396911621 56

Chrome seems to be messing up the x coordinates and width a bit, but the change is "only" 16%, compared to 500%.

When I change the rendered character to   (which is what I actually need), Chrome gets identical metrics, and Firefox remains 5-6x off.

If I add a viewBox (e.g. viewBox="0 0 1 1") to the <svg> element, then everything works again...

Comment 1

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

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

Comment 2

[Robert Longson [:longsonr]]

We adjust the font sizing on when you make things small to try to make things more legible.

Comment 3

[Erik Demaine]

I understand that you tweak font sizes a bit (Chrome clearly does this too, hence the 16% difference), but should I really be expecting the width and heights to be off by a factor of 5? This is not at all an accurate bounding box for the rendered text in the element's own coordinate frame.

Comment 4

[Erik Demaine]

Attachment: Better HTML demo rendering bounding boxes

I'm attaching in getbbox3.html an improved demo of the bug that renders the bounding box returned by getBBox in the same coordinate frame. In Firefox, it bears no relation to the rendered text, while in Chrome, it looks right.

Comment 5

[Erik Demaine]

Attachment: screenshot.png

Here's a screenshot with Chrome's behavior on the left and Firefox's behavior on the right. I expect the red rectangles to surround the rendered xs.