CSS OM, take 2

Just now I re-tested the CSS Object Model, both to accomodate IE8b1, FF3b4 and Safari 3.1, and because some of my earlier conclusions were wrong.

getBoundingClientRect()

In my previous post I dismissed getClientRects() and getBoundingClientRect() as incomprehensible, but now I understand I should test them with multi-line inline elements. When the methods are used on such elements, they (should) return one rectangle per line.

I rewrote the test page to show absolute elements at the rectangle coordinates, and now it's clear how getClientRects() is supposed to work, and that IE5.5-7 have significant bugs with this method: they report far too many rectangles. (IE8b1 does the right thing, BTW.)

Thanks to John Resig for taking the lead in dissecting a few browser oddities with these methods.

offset

I also retested the offset-related properties, and Travis Leithead of the IE team revealed the cause of Opera's weird negative values for offsetX/Y: Opera's reference point is the top/left of the content block (excluding padding and border), while Safari and Konqueror use the top/left of the element's border.

I summarily judged Opera's implementation Incorrect, because the Safari way seems to be the most logical one. I'm open to counter-arguments, though.

Update: The spec says that the correct reference point is the top/left of the padding-box, which makes sense. Page changed to reflect that.

Update 2: Went through the CSS Table, too. No surprises, except for one minor IE8b1 regression. However, I now count IE's support of its own rules[] array Incorrect for reasons mentioned in the table. This is an old bug.

This is the blog of Peter-Paul Koch, web developer, consultant, and trainer. You can also follow him on Twitter or Mastodon.
Atom RSS

If you like this blog, why not donate a little bit of money to help me pay my bills?

Categories:

Comments

Comments are closed.

1 Posted by Arjan O on 27 March 2008 | Permalink

Hereby the full list of (planned?) CSS changes for IE8 beta 1 and IE8 final. http://msdn2.microsoft.com/en-us/library/cc351024(VS.85).aspx

2 Posted by Chris Hester on 27 March 2008 | Permalink

The demo doesn't seem to work in Firefox 2 or Opera 9.5.

3 Posted by Gwen on 31 March 2008 | Permalink

Several IE applications are not compatible to other browsers (firefox or opera)esp. with a lower version. Since they're made to be better or "greater" than the other, they tend to put a stamp of exclusivity (which doesn't last very long, there are ways!). the link of Arjan says it...some css may be compatible on some versions of applications.

4 Posted by Arjan O on 2 April 2008 | Permalink

Update:
http://msdn2.microsoft.com/en-us/library/cc304082(VS.85).aspx

5 Posted by Ryan Cannon on 21 May 2008 | Permalink

One odd omission: IE7 screws up the the BODY element's offsetHeight property for a page loaded into an iframe. In other words:

window.frames[frame_id].document.body.offsetHeight

Returns the offsetHeight of the BODY element in Firefox and IE6, but the offsetHeight of the IFRAME element in IE7--at least it does when the iframe is smaller than its content. I'll whip up a quick test case when I get the chance.