Closed
Bug 1052356
Opened 11 years ago
Closed 6 years ago
getBoundingClientRect() returns wrong result for children of a svg if the svg element isn't at (0,0)
Categories
(Core :: SVG, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 1250143
People
(Reporter: duanyao.ustc, Unassigned)
References
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0 (Beta/Release)
Build ID: 20140728030201
Steps to reproduce:
Open the following xhtml file (also attached) with firefox:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>svg coord test</title>
<style>
body {
margin:0;
}
svg {
border: 20px blue solid;
stroke: red;
stroke-width: 1px;
fill: none;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="1" x2="100" y2="1"/>
</svg>
</body>
<script>
onload = function() {
console.log('svg:', document.querySelectorAll('svg')[0].getBoundingClientRect());
console.log('svg>*:', document.querySelectorAll('svg>*')[0].getBoundingClientRect());
}
</script>
</html>
Actual results:
The console output contains a line:
"svg>*:" DOMRect { x: -0.5, y: 0.5, width: 101, height: 1, top: 0.5, right: 100.5, bottom: 1.5, left: -0.5 }
Expected results:
The console output should contain a line:
"svg>*:" DOMRect { x: 19.5, y: 20.5, width: 101, height: 1, top: 19.5, right: 120.5, bottom: 21.5, left: 19.5 }
The svg element has a 20px border, so the result of getBoundingClientRect() on the line element should be offset by (20, 20). However, it isn't.
The inspector of the devtools also shows the line element with wrong position.
Comment 1•11 years ago
|
||
we have tests for this in bug 1049050 which include border.
Comment 2•11 years ago
|
||
looks like we're only testing width and height there which are correct in comment 0.
Comment 3•10 years ago
|
||
Confirmed in 34.0a1 (2014-08-31), Win 7 x64
Status: UNCONFIRMED → NEW
Ever confirmed: true
It seems like this is expected behavior, based on the description of getClientRects() at https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects :
"When called on SVG elements other than an outer-<svg> the "viewport" that the resulting rects are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rects are also transformed by the outer-<svg>'s viewBox transform, if any)."
(Note: The excerpted text was added on August 11, 2015, so this may be newly specified behavior.)
In any case it looks like Inspector is still expecting the reporter's expected behavior, not the behavior I quoted here.
Comment 5•9 years ago
|
||
The original specification is pretty vague: http://www.w3.org/TR/cssom-view/#dom-element-getclientrects but I guess we're consistent with the documentation we have.
Status: NEW → RESOLVED
Closed: 9 years ago
Resolution: --- → INVALID
Comment 6•9 years ago
|
||
Thanks for looking into this Tom.
Hi Tom Klein,
I don't think current Firefox behavior is what you described in https://bugzilla.mozilla.org/show_bug.cgi?id=1052356#c4 .
If the position of outer-<svg> is not at (0, 0) in the page, getBoundingClientRect() of its children is also affected by outer-<svg>'s position in Firefox. But according comment #4, it shouldn't.
See the attachment svg_coord_border_position_absolute.xhtml
The "left" of the <line> element reported by various browsers:
Firefox: 70 (according comment #4 it should be 0)
Chrome: 90
MS Edge: 89.5
Obviously Firefox has compatibility issue with other browsers.
I also doubt that the spec wants to omit the border of outer-<svg> but take its position into account.
(In reply to Duan Yao from comment #7)
> I don't think current Firefox behavior is what you described in
> https://bugzilla.mozilla.org/show_bug.cgi?id=1052356#c4 .
>
> If the position of outer-<svg> is not at (0, 0) in the page,
> getBoundingClientRect() of its children is also affected by outer-<svg>'s
> position in Firefox. But according comment #4, it shouldn't.
I would agree; thanks for catching that!
Status: RESOLVED → REOPENED
Resolution: INVALID → ---
Summary: getBoundingClientRect() returns wrong result for children of a svg if the svg element has a border → getBoundingClientRect() returns wrong result for children of a svg if the svg element isn't at (0,0)
Updated•6 years ago
|
Status: REOPENED → RESOLVED
Closed: 9 years ago → 6 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•