Bug Tracker

Opened 8 years ago

Closed 7 years ago

#10363 closed bug (worksforme)

IE7 reports TBODY as invisible unless it has content

Reported by: julian.birch@… Owned by: julian.birch@…
Priority: high Milestone: None
Component: css Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:

Description

The following demonstrates the problem. It reports that the TBODY is visible in both Chrome and Firefox, but invisible in IE. If you're using this to determine whether or not to populate a TBODY, this gets ugly fast.

<html><head></head>
<body>
<table>
  <thead><tr><th></th></tr></thead>
  <tbody></tbody>
</table>
<div>TBODY is <span></span></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type='text/javascript'>
function f() {
	v = $("TBODY").is(":visible") ? 'visible' : 'not visible (IE7 bug)';
	$("SPAN").html(v);
}

$(f);
</script>
</body></html>

Change History (11)

comment:1 Changed 8 years ago by julian.birch@…

Actually, the behaviour is even weirder than I initially thought. I no longer believe it has much to do with the lack of content. IE8 has the exact same problem However, if you try to debug it through the developer tools, you discover the problem goes away. I tried seeing if an _.defer would cause the test to pass, but no joy.

comment:2 Changed 8 years ago by Rick Waldron

Component: unfiledmanipulation
Owner: set to julian.birch@…
Status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to get started.

comment:3 Changed 8 years ago by anonymous

Hi, as requested: http://jsfiddle.net/JulianBirch/e78M2/

However, this actually gives a different result from the original example I've posted. In fact, the very act of including the code in jsfiddle modified the result (OUCH). The results of the jsfiddle are:

IE, Firefox : TBODY is not visible until text is inserted. Chrome : TBODY is always visible.

However, the original example code behaves differently in Firefox, so please take the time to run it locally. The original non-fiddlejs code reports the TBODY as being visible, despite having no text inserted.

It's looking like a pretty nasty edge case. As I said before, I'm trying to use this to determine if a region is visible so that I can choose to populate it with data. I can and have patched around the problem, but it's definitely a bit weird.

comment:4 Changed 8 years ago by Julian Birch

I should add that the behaviour of the original test is unchanged on edge.

comment:5 Changed 8 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

comment:6 in reply to:  5 Changed 8 years ago by julian.birch@…

Replying to trac-o-bot: Sorry, in what way haven't I responded to the requests?

comment:7 in reply to:  2 Changed 8 years ago by julian.birch@…

Replying to rwaldron: Just to confirm, bug is still present in 1.7 beta 2.

comment:8 Changed 7 years ago by anonymous

Why is this issue marked as invalid? I am having this exact problem right now. Using IE8.

<table>

<thead> </thead>

<tbody style="display:none;" id="TheTableBody"> </tbody>

</table>

alert($('#TheTableBody').is(':visible')); false $("#TheTableBody").toggle(); alert($('#TheTableBody').is(':visible')); false

comment:9 Changed 7 years ago by dmethvin

Component: manipulationcss
Priority: undecidedhigh
Resolution: invalid
Status: closedreopened

The OP replied anonymously, which is why the ticket wasn't reopened. The OP's test case looks okay so I'll reopen it. Your code snippet on the other hand isn't technically valid, since the tbody can't be totally empty:

When present, each THEAD, TFOOT, and TBODY contains a row group. Each row group must contain at least one row, defined by the TR element. http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3

comment:10 Changed 7 years ago by dmethvin

Status: reopenedopen

comment:11 Changed 7 years ago by mikesherov

Resolution: worksforme
Status: openclosed

So the reason jsfiddle modified the result is due to it's normalized css rules. If you turn off normalization in jsfiddle: you'll see that it behaves the same is all IE7,FF,chrome: http://jsfiddle.net/e78M2/10/ and that they all report "visible".

By default, all browsers include some amount of padding and margin on TD elements, which get applied to the TBODY's width: http://jsfiddle.net/e78M2/9/

Conclusion: if you don't muck with css, all browsers report visible if you have valid markup on TBODY, as they should. I'm resolving this as worksforme.

OP, please feel free to write back if I've missed something here.

Note: See TracTickets for help on using tickets.