IE9 Crashes when hiding table row or tbody in specific CSS circumstance: colspan > 1, border-collapse:collapse, border:0 !important

▲
2
▼

(Related to other post with minor refinements and perhaps slightly different use case then that one?).

This took hours to narrow down what specifically in my page's HTML/CSS combination was causing IE9 to crash with the "Internet Explorer has stopped working" error (if I choose to debug, the specific error was "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." IE 8 did not crash. I narrowed it down to the following:

To reproduce, create an HTML page with this (seemingly) simple table:

<table>
    <tr>
        <td colspan="2">
            TEST ROW
        </td>
    </tr>
    <tr class="tr1" id="tr1">
        <td class="blank">
            test
        </td>
        <td>
            test
        </td>
    </tr>
</table>

Add this CSS:

<style>

    .tr1 td, th
    {
        border: 1px solid Black;
    }        

    td.blank
    {
       border:0 !important;
    }        

    table
    {
        border-collapse: collapse;
    }

</style>

Add this button (or any other mechanism) to hide the second row:

<input type="button" onclick="document.getElementById('tr1').style.display='none';"
    value="Hide Table Row" />

If you click the button, you will reliably reproduce the IE9 bug.

Anyway, I wanted to post this bug because I could not find a single posting that matched the error code "Unhandled exception at 0x602508cb in iexplore.exe: 0xC0000005: Access violation reading location 0x00000018." and hope this helps the next guy.

Does anyone else have any workarounds they want to contribute? Have you come accross this bug? Anyone in the IE 10/Windows preview group know if IE 10 has same issue?. If not, would you mind filing this as a bug?

crash
internet-explorer-9
asked on Stack Overflow Sep 19, 2012 by AdamE • edited May 23, 2017 by Community

2 Answers

▲
1
▼

Here are some workarounds - all of them work but might not be appropriate for your situation:

  • remove !important from blank 0 border (I could not use this solution because I truly needed no border - it was important - pun intended ;) )
  • OR make border 1px solid White instead of border 0 (this is solution I used and in a way makes sense that borders should not go from 1px to 0px and is probably the root of the bug in IE9 I'd guess?)
  • OR get rid of border-collapse: collapse; (I couldn't use this because I wanted them collapsed)
  • OR get rid of colspan (I couldn't because I needed it)
  • OR take up knitting instead of writing Software for constantly changing browsers (again, I couldn't because I don't like knitting;) )
answered on Stack Overflow Sep 19, 2012 by AdamE
▲
0
▼

Thanks @AdamE... your workarounds were a big help.

I am in the same position: I need to hide a row on a table with collapsed borders and the occasional colspan (....and I don't like knitting either :)

I used an equivalent of Xrumet's answer to temporarily apply your/his workaround: 

$myTable.css("borderCollapse", "separate");
$myRow.hide();
$myTable.css("borderCollapse", "");

Does the job.

answered on Stack Overflow Aug 9, 2013 by Merenzo • edited May 23, 2017 by Community

User contributions licensed under CC BY-SA 3.0