#6426 closed bug (wontfix)
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 (12)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
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.
comment:3 Changed 13 years ago by
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 13 years ago by
Changed 13 years ago by
Attachment: | no_issue.jpg added |
---|
comment:4 Changed 13 years ago by
Dmethvin,
About jQuery.support. Is there any way that I can disable this logic to test if it changes the problem?
Regards, Robert
comment:5 Changed 13 years ago by
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
comment:6 Changed 13 years ago by
One more update: with overflow:hidden the problem does not occur. In some circumstances this might provide a workaround for this issue.
Regards, Robert
comment:7 Changed 13 years ago by
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!
comment:8 Changed 13 years ago by
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
comment:9 Changed 12 years ago by
Priority: | → undecided |
---|---|
Resolution: | → wontfix |
Status: | new → closed |
If you are satisfied with that solution, I will close this.
comment:10 Changed 12 years ago by
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.