What should getBoundingClientRect() on a transform

2020-07-06 08:26发布

问题:

Today I tested what happens when you use getBoundingClientRect() on an SVG element that has been rotated.

Test: http://phrogz.net/svg/getBoundingClientRect-on-rotated-elements.html

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.

回答1:

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.