1066435 - getBoundingClientRect() doesn't take CSS transform into account for SVG elements

Status: RESOLVED DUPLICATE of bug 1541021

(Core :: SVG, defect)

Description

[Duan Yao]

Attachment: svg_getBoundingClientRect()_with_transform.xhtml

User Agent: Mozilla/5.0 (Windows NT 5.2; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20140811030203

Steps to reproduce:

1. Apply CSS transform to a SVG element (e.g. a <rect>).
2. Call getBoundingClientRect() on it.

You can load the attachment to reproduce this issue.


Actual results:

getBoundingClientRect() returns the bounding box as if no transform is applied.


Expected results:

getBoundingClientRect() should return the bounding box after the CSS transform is applied.

Note that this issue only happens with CSS 'transform' property, while 'transform' attribute of SVG elements works as expected.

In the attachment, two 40x40 <rect>s are scaled by factor of 0.75, via 'transform' attribute and CSS 'transform' property respectively. getBoundingClientRect() returns a 30x30 box for the former, but a 40x40 box for the latter.

Comment 1

[Alice0775 White]

Confirmed on windoes7

Comment 2

[John Drinkwater (:beta)]

Can confirm, bumped into this after making a userstyle.css for Github contribution activity, the hovering tooltip for the days contribution stays in the original position.

https://gist.github.com/johndrinkwater/e5a0f711a72579d134a4 is the stylish rule for any github.com account profile, it adjusts the days to have Monday as the first day of the week. Tooltips for sundays are most noticable, the rest just overlap the hovered day so flicker on and off.

Comment 3

[me]

For what it's worth, here's a JSFiddle that exposes this issue:

https://jsfiddle.net/mycrobe/nvwkhm02/

Comment 4

[Neil Fraser]

Still present in most recent Firefox build.  This bug is currently blocking a Google launch.  Looking for a work-around.

Comment 5

[Daniel Holbert [:dholbert]]

Based on comment 0, it sounds like like one workaround would be to use the "transform" attribute rather than CSS property.