Bug Tracker

Modify

Ticket #8048 (closed bug: patchwelcome)

Opened 3 years ago

Last modified 19 months ago

overflow:scroll gives wrong width in IE8

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

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

Change History

comment:1 Changed 3 years ago by jitter

  • Priority changed from undecided to low
  • Resolution set to patchwelcome
  • Status changed from new to closed
  • Component changed from unfiled to dimensions

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

comment:2 Changed 3 years ago by marnixkraus@…

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.

comment:3 Changed 3 years ago by jitter

#8345 is a duplicate of this ticket.

comment:4 Changed 2 years ago by anonymous

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

comment:5 Changed 2 years ago by anonymous

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

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

comment:6 Changed 19 months ago by mikesherov

#12653 is a duplicate of this ticket.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.