Closed Bug 1052356 Opened 10 years ago Closed 5 years ago

getBoundingClientRect() returns wrong result for children of a svg if the svg element isn't at (0,0)

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Version:
34 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1250143

People

(Reporter: duanyao.ustc, Unassigned)

References

Details

Attachments

(2 files)

svg_coord2.xhtml
648 bytes, application/xhtml+xml
Details
another test case with both border and position
733 bytes, application/xhtml+xml
Details
Attached file svg_coord2.xhtml — 
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.
we have tests for this in bug 1049050 which include border.
looks like we're only testing width and height there which are correct in comment 0.
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.
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
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)
Status: REOPENED → RESOLVED
Closed: 9 years ago → 5 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: