Side navigation
#9331 closed bug (cantfix)
Opened May 18, 2011 10:29AM UTC
Closed May 18, 2011 02:42PM UTC
Last modified March 09, 2012 04:37AM UTC
$(document).width(), $(document).height() unreliable in IE6, 8 and 9
| Reported by: | _michael | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | dimensions | Version: | 1.6.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
$(document).width() and $(document).height() don't always report the true document size. Return values will include the width of the scrollbar if exactly one scrollbar is present (IE6, 8, 9). In addition, they will be off by 4px if the content area is smaller than the viewport (IE6, 8).
The likely cause: The figures returned by document.documentElement.offsetWith and .offsetHeight include elements of the browser chrome (scrollbars; in IE6/8, a 2px border around the viewport). These figures confuse the result calculated by jQuery.
I've seen the problem a while ago in jQuery 1.3.2, and it is still there in 1.5.2 and 1.6.1. Windows XP through Windows 7.
jsFiddle: http://jsfiddle.net/_michael/eUs5W/
Here's a blog post with more details if you need them, including a demo and a temporary workaround.
Bug #8048 seems to be another manifestation of this problem, although it's a special case.
Attachments (0)
Change History (2)
Changed May 18, 2011 02:42PM UTC by comment:1
| component: | unfiled → dimensions |
|---|---|
| priority: | undecided → low |
| resolution: | → cantfix |
| status: | new → closed |
Changed May 18, 2011 03:40PM UTC by comment:2
Body width certainly is a good replacement in many cases, but as soon as floated or positioned elements stick out of the body, document width will differ substantially from body width.
I'd kind of disagree with the notion that there is something like a "real document width in IE", though, especially as this figure is different in each and every version. IE6 includes the scrollbar and a 4px border area, IE7 doesn't include either of them, IE8 behaves like IE6 except that the scrollbar isn't permanent, IE9 leaves in the scrollbar and drops the border. You get the picture.
I have an extension in place which solves the problem, but it has to rely on browser sniffing because I didn't find a suitable way to feature test this either. Once you know you are dealing with IE, no matter which version, it's easy to solve because all that needs to be done is excluding document.documentElement.offsetWidth from the width calculation.
That said, I understand if you don't want to have browser detection in your codebase, of course. It's not pretty.
I think jitter's recommended solution would apply here as well (i.e. using $("body").width() instead). This seems to be one of those cases that we cannot really change. A fix for this would not be simple because we would need to feature test for scrollbar inclusion in document width and either add or subtract that width to make the values consistent.
The problem there is, it's not really true. The real document width does include the scrollbar width in IE and does not in Firefox. We may have to leave it that way so that the user will account for it (if in fact the true document width is needed). If not, body width still works fine.