Side navigation
#10363 closed bug (worksforme)
Opened September 28, 2011 11:34AM UTC
Closed September 03, 2012 06:52PM UTC
IE7 reports TBODY as invisible unless it has content
| Reported by: | julian.birch@colourcoding.net | Owned by: | julian.birch@colourcoding.net |
|---|---|---|---|
| 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>
Attachments (0)
Change History (11)
Changed September 28, 2011 04:09PM UTC by comment:1
Changed September 28, 2011 04:10PM UTC by comment:2
| component: | unfiled → manipulation |
|---|---|
| owner: | → julian.birch@colourcoding.net |
| status: | new → pending |
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.
Changed September 29, 2011 09:30AM UTC by comment:3
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.
Changed September 29, 2011 11:30AM UTC by comment:4
I should add that the behaviour of the original test is unchanged on edge.
Changed October 14, 2011 07:49AM UTC by comment:5
| resolution: | → invalid |
|---|---|
| status: | pending → closed |
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!
Changed October 14, 2011 02:24PM UTC by comment:6
Replying to [comment:5 trac-o-bot]:
Sorry, in what way haven't I responded to the requests?
Changed October 14, 2011 02:26PM UTC by comment:7
Replying to [comment:2 rwaldron]:
Just to confirm, bug is still present in 1.7 beta 2.
Changed July 31, 2012 01:46AM UTC by comment:8
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
Changed July 31, 2012 01:53AM UTC by comment:9
| component: | manipulation → css |
|---|---|
| priority: | undecided → high |
| resolution: | invalid |
| status: | closed → reopened |
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
Changed July 31, 2012 01:54AM UTC by comment:10
| status: | reopened → open |
|---|
Changed September 03, 2012 06:52PM UTC by comment:11
| resolution: | → worksforme |
|---|---|
| status: | open → closed |
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.
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.