jQuery's width() method returns an incorrect value when used on an invisible element with absolute or fixed positioning. However, this is only the case when the invisible element does not have an explicitly assigned width. This can be traced to the css() method: in its "width" case for invisible elements, it clones the node and sets the padding/border widths to zero to measure the element. The problem is that it also explicitly sets the "left" and "right" edge positions, which will implicitly change the element's width when it has no explicit width. That code appears to be intended to position the element at the origin point of the page, but due to a simple oversight actually ends up changing the element size. This behaviour is consistently incorrect on Firefox 2, IE 7, and Opera 9 (all on Windows; I don't have access to a Mac).
The work-around, is of course, to display the element before trying to get its size. However, you shouldn't have to do this, and usually you want to position the element before displaying it. Changing the positioning to something else is no good, since that completely changes how the browser sizes the element.
This demonstrates the bug. Watch the #div2/#div4 width values as you click the buttons.
| Div id | Result of width() |
|---|---|
| div1 | |
| div2 |
| Div id | Result of width() |
|---|---|
| div3 | |
| div4 |
The bug has an easy, one-line fix:
From: src/core.js@3669, line 773right: "0",To:
top: "0",