Problem with jQuery, IE 8 and overflow:auto

[theninth7]

I see an issue in layout that seems to be caused by jQuery. It occurs when:

-) The page contains a reference to the jQuery script. The script is ONLY referenced and not used in any way. I am using jQuery 1.4.2.

-) The body tag has the CSS attribute "overflow" set to "auto". This should hide the unused scroll bar on the right side in IE.

-) The body contains a table with CSS attribute "width" set to "100%".

-) The page is viewed in IE 8. The issue DOES NOT occur with FIREFOX. I did not test with other IE versions.

The problem is that the table is not extended to the right border of the browser window. Instead it stops where the scroll bar would be if it would not be hidden by the overflow:auto setting.

I have created three test pages that show the problem:

-) Page references jQuery, layout is INCORRECT: ​http://www.the-ninth.com/demo/test_jquery.htm

-) Page does not reference any script, layout is CORRECT: ​http://www.the-ninth.com/demo/test_no_jquery.htm

-) Page references dummy script, layout is CORRECT: ​http://www.the-ninth.com/demo/test_jquery.htm

Interesting detail: with the test page the layout problem seems to occur ALL the time. With the more complex page that I am currently working on and where I originally discovered the issue the problem ONLY occurred maybe 2/3 of the time, while in 1/3 cases the layout is correct. The page is always the same, I just hit the reload button and sometimes the layout problem is there and sometimes not.

Kind regards, Robert

[theninth7]

Sorry, I got the link to the last page wrong:

-) Page references dummy script, layout is CORRECT: ​http://www.the-ninth.com/demo/test_other.htm.

[dmethvin]

In IE I see both horizontal and vertical scroll bars, even though it seems like the content wouldn't require it if the scroll bars themselves didn't take up space. Is that what you are seeing as well?

From the description I suspect this has to do with the jQuery.support logic.

[theninth7]

Which IE version are you using?

In IE 8 the overflow:auto property hides the vertical scroll bar if it is not required by the content. This is the case in the test file.

However, when jQuery is referenced then the content layout is still done as if the vertical scroll bar would be there. The table with width:100% does not extend to the right border of the browser window. Instead it stops where the vertical scroll bar would be if the overflow:auto property would not be set.

I am attaching two screen shots that show the problem on my original page (not the test page that I linked before). issue.jpg is how the page looks if it contains the reference to jQuery, no_issue.jpg is the same page without the reference.

Regards, Robert

[theninth7]

Dmethvin,

About jQuery.support. Is there any way that I can disable this logic to test if it changes the problem?

Regards, Robert

[theninth7]

I did a few further tests with different versions of jQuery:

It seems that the issue affects jQuery >= 1.3. When including jQuery 1.2.6 the issue does not occur. I tested 1.3, 1.3.2, 1.4 and 1.4.2 and in all these versions the issue does occur.

Regards, Robert

[theninth7]

One more update: with overflow:hidden the problem does not occur. In some circumstances this might provide a workaround for this issue.

Regards, Robert

[dmethvin]

Sorry about the lack of response, the ticket system doesn't notify anyone when a reply is made. Also this ticket wasn't categorized, further increasing the odds it would be neglected.

As I mentioned above, this seems like it may be related to jQuery.support. At this point I don't have any other thoughts about possible causes but the test case should help. Thanks!

[theninth8]

Thanks.

I now found a permanent workaround. When I set the CSS property in jQuery code instead of in the CSS file then it works:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> <!--

$(document).ready( function() {

$("body").css( "overflow", "auto" );

} );

--> </script>

See you, Robert

[SlexAxton]

If you are satisfied with that solution, I will close this.

[anonymous]

Hi,

Personally I can live with it. However, IMHO, if it is a bug, it should be fixed. If it has another explanation, then it could be left as it is.

Cheers, Robert