Side navigation
#6426 closed bug (wontfix)
Opened April 12, 2010 03:09PM UTC
Closed November 03, 2010 03:33AM UTC
Last modified March 14, 2012 01:30AM UTC
Problem with jQuery, IE 8 and overflow:auto
| Reported by: | theninth7 | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | 1.4.3 |
| Component: | css | Version: | 1.4.2 |
| Keywords: | IE8 overflow auto | Cc: | |
| Blocked by: | Blocking: |
Description
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
Attachments (2)
Change History (10)
Changed April 12, 2010 03:11PM UTC by comment:1
Changed April 13, 2010 01:17AM UTC by comment:2
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.
Changed April 13, 2010 07:30AM UTC by comment:3
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
Changed April 13, 2010 07:33AM UTC by comment:4
Dmethvin,
About jQuery.support. Is there any way that I can disable this logic to test if it changes the problem?
Regards, Robert
Changed April 17, 2010 05:55PM UTC by comment:5
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
Changed April 17, 2010 06:16PM UTC by comment:6
One more update: with overflow:hidden the problem does not occur. In some circumstances this might provide a workaround for this issue.
Regards, Robert
Changed June 12, 2010 02:38AM UTC by comment:7
| component: | unfiled → css |
|---|
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!
Changed July 12, 2010 06:58AM UTC by comment:8
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
Changed November 03, 2010 03:33AM UTC by comment:9
| priority: | → undecided |
|---|---|
| resolution: | → wontfix |
| status: | new → closed |
If you are satisfied with that solution, I will close this.
Changed November 03, 2010 06:59AM UTC by comment:10
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
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.