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

REOPENED
Unassigned

Status

()

Core
SVG
REOPENED
3 years ago
2 years ago

People

(Reporter: Duan Yao, Unassigned)

Tracking

34 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
Created attachment 8471484 [details]
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

Comment 4

2 years ago
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
Last Resolved: 2 years ago
Resolution: --- → INVALID
Thanks for looking into this Tom.
(Reporter)

Comment 7

2 years ago
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.
(Reporter)

Comment 8

2 years ago
Created attachment 8656330 [details]
another test case with both border and position

Comment 9

2 years ago
(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)
You need to log in before you can comment on or make changes to this bug.