Menu
Today I tested what happens when you use getBoundingClientRect() on an SVG element that has been rotated.
The result is that:
Chrome, Safari, Opera, and IE appear to calculate the local (untransformed) bounding box of the element, and then return the client rect for that bounding box. This can result in a client rect larger than seems appropriate.
Firefox, on the other hand, clips the client rect to fit the element itself.
Which behavior is correct according to the specifications?
For what it's worth, I prefer the Firefox behavior, but (absent understanding the specs) think that Firefox's deviation should be considered a bug.
634
The getBoundingClientRect() method returns the size of an element and its position relative to the viewport. The getBoundingClientRect() method returns a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height.
getBoundingClientRect() returns the coordinates of an element on the screen after being transformed.
The Element. getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
getBoundingClientRect() gives a result relative to the viewport's top-left corner ( 0,0 ), not relative to an element's parent, whereas el.
Non-firefox browsers don't seem to give useful results and don't seem to match the relevant specifications either.
The CSSOM View Module delegates to the SVG specification which says it's the tight bounding box after transforms not the tight bounding box transformed so I maintain that I implemented it correctly.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
