Ticket #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: | ||
| Blocking: | Blocked by: |
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
comment:2 follow-up: ↓ 7 Changed 20 months ago by rwaldron
- Owner set to julian.birch@…
- Status changed from new to pending
- Component changed from unfiled to manipulation
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 20 months 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 20 months ago by Julian Birch
I should add that the behaviour of the original test is unchanged on edge.
comment:5 follow-up: ↓ 6 Changed 20 months ago by trac-o-bot
- Status changed from pending to closed
- Resolution set to invalid
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 20 months 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 20 months ago by julian.birch@…
Replying to rwaldron: Just to confirm, bug is still present in 1.7 beta 2.
comment:8 Changed 10 months 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 10 months ago by dmethvin
- Priority changed from undecided to high
- Resolution invalid deleted
- Status changed from closed to reopened
- Component changed from manipulation to css
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:11 Changed 9 months ago by mikesherov
- Status changed from open to closed
- Resolution set to worksforme
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.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
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.