Thursday, March 20th, 2008

Why getBoundingClientRect is important

Category: JavaScript, jQuery, Standards

We posted about PPK’s thoughts on CSSOM which included him dissing getBoundingClientRect() and getClientRects():

I feel this part of the specification is not yet ready. At the very least, the relation of TextRectangle boxes to actual elements should be defined in the case there’s more than one TextRectangle box, because I don’t understand what to expect (and I suspect browser vendors don’t, either, because Firefox and Opera never report more than one box, anyway).

John Resig, on the other hand, thinks that getBoundingClientRect is awesome (high praise, for a method).

What makes this method so especially handy 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.

To illustrate the point he points us to the jQuery implementation of .offset(), which is ugly indeed.

He also shows how much faster it is by creating a test page and a movie demonstrating the difference.

Posted by Dion Almaer at 7:30 am

3.2 rating from 13 votes


Comments feed TrackBack URI

High praise for a method indeed. It’s like having someone saw off your right arm and then euphorically discovering you still have your left arm…

Comment by Tim Cooijmans — March 20, 2008

I think I was too quick in dissing getBoundingClientRect(). I’m going to re-test them (and the rest of CSS OM) and then I’m going to get back to this point.

Comment by ppk — March 20, 2008

Leave a comment

You must be logged in to post a comment.