getBoundingClientRect() is 8px larger due to stroke-width with svg:polygon

RESOLVED INVALID

Status

()

Core
SVG
RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: Andre Schmidt, Unassigned)

Tracking

({testcase})

Trunk
x86_64
All
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
Created attachment 8486571 [details]
test-brect.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36

Steps to reproduce:

so i'm doing a flowchart with svg and javascript, where i need to draw lines from "block" to "block". and for that it seems i need getBoundingClientRect() to calculate the "blocks" position in the svg document. testing it in firefox i saw that the lines were placed oddly and could track it down on getBoundingClientRect() not giving same values as chromium.

tested with firefox 32.0 and firefox-nightly 35.0a1.20140909

attached test-brect.html should draw two svg "blocks" with black outline, and two rectangles with red outline visualizing the boundary box calculated for those "blocks".


Actual results:

http://osku.de/post/test-brect.png shows how firefox and chromium renders it. i'm not sure if firefox does it wrong - definetily odd -, or if i'm doing it wrong, but chromium renders it as i need it.


Expected results:

http://osku.de/post/test-brect.png as rendered by chromium
The subtraction seems wrong. I.e. I'd expect it to be

	rect.setAttribute('x', brect.left);
	rect.setAttribute('y', brect.top);

but then that only works when the margin is 0 i.e. with

<style>
* {
margin:0;
}
</style>

Comment 2

4 years ago
I see the problem with the second <polygon id="bar" points="10,0 30,0 20,20 0,20"/> only - getBoundingClientRect() thinks it's 38x28 when getBBox() says it's 30x20.

This is due to stroke-width here:
<svg id="svg" style="fill:none;stroke:#000;stroke-width:1px">

As you decrease its value (e.g. 0.1px), the bounding rect becomes closer to 30x20.

I'm not sure if this is correct or a bug. See also bug 654145 comment 4.
Status: UNCONFIRMED → NEW
Component: Untriaged → SVG
Ever confirmed: true
Keywords: testcase
OS: Linux → All
Product: Firefox → Core
Summary: getBoundingClientRect() weirdness → getBoundingClientRect() is 4px larger due to stroke-width with SVG
Version: unspecified → Trunk

Updated

4 years ago
Summary: getBoundingClientRect() is 4px larger due to stroke-width with SVG → getBoundingClientRect() is 8px larger due to stroke-width with svg:polygon
No, that's not a bug. We asked for the spec to change: http://lists.w3.org/Archives/Public/www-style/2011Aug/0120.html
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.