If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

NEW
Unassigned

Status

()

Core
SVG
3 years ago
2 months ago

People

(Reporter: Duan Yao, Unassigned)

Tracking

Trunk
x86_64
Windows Server 2003
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

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

3 years ago
Confirmed on windoes7
Status: UNCONFIRMED → NEW
Ever confirmed: true

Updated

3 years ago
Version: 34 Branch → Trunk

Updated

3 years ago
Blocks: 776054
Blocks: 1108531
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

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

https://jsfiddle.net/mycrobe/nvwkhm02/
You need to log in before you can comment on or make changes to this bug.