Bug Tracker

Opened 10 years ago

Closed 9 years ago

Last modified 8 years ago

#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)

issue.jpg (19.7 KB) - added by theninth7 10 years ago.
no_issue.jpg (18.2 KB) - added by theninth7 10 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 10 years ago by 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.

comment:2 Changed 10 years ago by 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.

comment:3 Changed 10 years ago by 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

Changed 10 years ago by theninth7

Attachment: issue.jpg added

Changed 10 years ago by theninth7

Attachment: no_issue.jpg added

comment:4 Changed 10 years ago by theninth7

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 10 years ago by 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

comment:6 Changed 10 years ago by 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

comment:7 Changed 10 years ago by dmethvin

Component: unfiledcss

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 9 years ago by 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

comment:9 Changed 9 years ago by SlexAxton

Priority: undecided
Resolution: wontfix
Status: newclosed

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

comment:10 Changed 9 years ago by 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

Note: See TracTickets for help on using tickets.