Bug Tracker

#8048 closed bug (patchwelcome)

Opened January 25, 2011 10:27AM UTC

Closed January 26, 2011 03:57PM UTC

Last modified October 14, 2012 01:14PM UTC

overflow:scroll gives wrong width in IE8

Reported by: marnixkraus@hotmail.com Owned by:
Priority: low Milestone: 1.next
Component: dimensions Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

jQuery 1-4-4

Internet Explorer 8 vs. Firefox 3.6.6

Win 7 x64

When I have my <body> element set to overflow:scroll, IE 8 gives the same width as without a scrollbar, while Firefox returns different values for the width with and without the scrollbar.

$(document).ready(function()
{
    $('div').append('<p>' + $(document).width() + '</p>');
    $('body').css('overflow-y','scroll');
    $('div').append('<p>' + $(document).width() + '</p>');
    $('body').css('overflow','scroll');
    $('div').append('<p>' + $(document).width() + '</p>');
});

<html>
    <body>
        <div>
        </div>
    </body>
</html>

Will return in firefox:

834

817

817

Will return in IE 8:

834

834

834

JSFiddle can be found here: JSFiddle

Attachments (0)
Change History (6)

Changed January 26, 2011 03:57PM UTC by jitter comment:1

component: unfiled → dimensions
priority: undecided → low
resolution: → patchwelcome
status: new → closed

Thanks for taking the time to contribute to the jQuery project by writing a bug report.

I'm not convinced that this is a bug.

From my investigations it seems that IE in this case returns a different value then most other browsers for offsetWidth. But afaik offsetWidth isn't standardized by a W3C spec but comes from the MSIE DHTML object model.

I also don't understand why you are checking $(document).width() when setting styles on the body. If you do $("body").width() you should get the expected results. You could also resort to manually checking the scrollWidth which also should give you the value you want.

In any case I guess this isn't trivial to fix (if it is a bug at all), thus I close this ticket.

If you can provide a detailed rundown on why this indeed is a bug and you have a small patch (as pull request) available please report back.

Related reading:

http://api.jquery.com/width

http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx

https://developer.mozilla.org/en/Determining_the_dimensions_of_elements\\\\

https://developer.mozilla.org/en/DOM/element.offsetWidth

http://www.w3.org/TR/CSS21/visufx.html#overflow\\\\

http://www.w3.org/TR/CSS21/visudet.html#the-width-property

Changed January 27, 2011 11:18AM UTC by marnixkraus@hotmail.com comment:2

Ok accepted, I did do some other tests as well. But the bodyWidth is indeed the best solution. I still find it strange that the document doesn't give a right value when overflow: scoll is on, because it is only in IE8 and not in IE7.

IE8 pretends if the scrollbar isn't there, but does adjust its body to it.

Thanks for the advice.

Changed February 23, 2011 12:40AM UTC by jitter comment:3

#8345 is a duplicate of this ticket.

Changed January 26, 2012 11:46PM UTC by anonymous comment:4

Please review this as this is still an issue...

Changed January 26, 2012 11:48PM UTC by anonymous comment:5

Please reopen this as this is very much still an issue... Look below for details.

http://stackoverflow.com/questions/3012668/get-the-window-height

Changed October 14, 2012 01:14PM UTC by mikesherov comment:6

#12653 is a duplicate of this ticket.