Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

tr display none crashes ie9

This code crashes ie9 as i am having this problem in my code .. any work around will be appreciated .. This is not a problem with the previous versions of ie .. Thanks ..

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head></head>
    <body>
        <table style="border-collapse: collapse">
            <tr id="firsttr">
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr id="secondtr">
                <td></td>
                <td style="border: 1px solid #D2D2D2">Move cursor here</td>
                <td></td>
            </tr>
        </table>
    </body>
    <style type="text/css">
        #secondtr:hover {
            display: none;
        }

    </style>
</html>

Even using onclick event crashes the browser .. try the following .. Move cursor here

    <script type="text/javascript">
    function HideThis()
    {
        document.getElementById('secondtr').style.display = 'none';
    }
</script>
like image 390
Sakthivel Viswanathan Avatar asked Jul 04 '12 09:07

Sakthivel Viswanathan


3 Answers

I have the same problem, and have found a solution. First of all I should say that the problem is actual for any row in table with style borderCollapse equal to collapse (no matter if it is declared inline or in head) in IE9.

My solution:

function hideRow(tableNode, rowNode, hide){
    if(hide){
        if(window.navigator.userAgent.search('MSIE 9.0') != -1){
            var initValue = tableNode.style.borderCollapse;
            tableNode.style.borderCollapse = 'separate';
            rowNode.style.display = 'none';
            tableNode.style.borderCollapse = initValue;
        }else{
            rowNode.style.display = 'none';
        }
    }else{
        rowNode.style.display = '';
    }
}

Or even shorten:

function hideRow(tableNode, rowNode, hide){
    var initValue = tableNode.style.borderCollapse;
    tableNode.style.borderCollapse = 'separate';
    rowNode.style.display = hide ? 'none' : '';
    tableNode.style.borderCollapse = initValue;
}
like image 120
Xrumet Avatar answered Nov 11 '22 01:11

Xrumet


There is a bug in IE9, but the css rule is logically undecidable :

As soon as it isn't displayed any more, your mouse isn't hovering any more so it must be visible again. Which means the mouse is over it. Which means it must be hidden... which means it must be visible... etc.

Said otherwise : the specification doesn't make sense.

This being said, this bug is really annoying as the following code crashes IE9 too :

$(window).ready(function(){
    $('#secondtr').mouseenter(function(){
         $('#secondtr').hide();
    });
});

But it doesn't happen if you put your event handler on a span (for example). So I suggest you change your HTML in order to avoid hidding the tr on which you have a hovering detection.

like image 42
Denys Séguret Avatar answered Nov 11 '22 00:11

Denys Séguret


This seems to be a bug in IE9.

Changing display:none to visibility:hidden, you will see the text flash continuously.

The only think I can think of is the IE gets stuck in an infinite loop or a stackoverflow.

Sorry, that I can't provide a solution.

like image 1
leppie Avatar answered Nov 11 '22 02:11

leppie