getBoundingClientRect is Awesome

getboundingclientrect is a method, first introduced by internet explorer 5 (and now included in firefox 3 ), which provides the top, right, bottom, and left offset coordinates of an element. after ppk mentioned this method in a recent post of his , poo-poo-ing its applicability, i thought i'd take some time to show how useful it can be. what makes this method so especially handys is that the alternative means of computing an element's offset position is so horribly slow and buggy that it borders on the comical.

the general purpose of this method, or of similar implementations, is to allow the user to get the visual top/left position of an element (such that if they absolutely position an element from the document it would be on top of the desired element - making things like tooltips possible, to name a single application). this means that you have to take into account a huge number of quirks. in no particular order here are some choice bugs which make this very difficult:

• handling table border offsets.
• fixed positioned elements.
• scroll offsets within another element.
• borders of overflowed parent elements.
• miscalculation of absolutely positioned elements.

for example, looking at jquery's implementation of .offset() (which provides the top/left offset of an element) we can see a number of these quirks worked around. a phenomenal amount of work has gone into the method, by the excellent brandon aaron, in order to "get it right" in a cross-browser manner. check out the extensive suite of tests that are backing it up, as well.

this is where getboundingclientrect comes into play. for a visual comparison look at the green boxes (representing the getboundclientrect-based implementation) versus the red boxes (representing the normal cross-browser implementation).

the reason why the getboundingclientrect implementation is more than 1 line is due to two facts:

1. it doesn't include the document scroll offset (which is a simple addition ).
2. internet explorer's handling of <html/> element border widths is completely whack .

in comparison to the default technique, however, this is a veritable walk-in-the-park.

now, not only, is this method simpler to use it's also insanely faster. stupifyingly so. considering that you no longer have to perform all sorts of hacks, or walk the tree to rectify miscalculations, the result is quite impressive.

view the following jquery ui drag-and-drop sorting demo page in firefox 2 (drag the items in the grid, at the bottom) and then view it in firefox 3, doing this same:

http://dev.jquery.com/view/trunk/ui/tests/sortable.html

night and day. i've also uploaded a simple movie demonstrating the difference.

i absolutely encourage everyone to check this method out. it can serve as a near-drop-in replacement for your offset needs - and will gracefully work in new browsers that support the method.