If you’ve been following me on Twitter, you no doubt know that I’m fighting rendering problems with Internet Explorer 8.  Today, I have finally tracked down one very elusive bug.  The problem occurs in liteGrid when a user clicks on a cell to edit it.  The contents of the cell are placed with an input element.  When the user is finished, they can toggle out of edit mode by pressing escape, enter, or changing the focus to a different element, at which point the input is removed and replaced with the new value.  In IE8, the cell width will randomly lose 3 pixels of width when the contents of the cell is changed.  Sometimes it occurs when entering edit mode, sometimes it occurs after exiting.  Not surprisingly, it works fine in both Chrome and Firefox. 

After much debugging, I came up with a bare bones reproduction case:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  
  google.load("jquery", "1.3.2");
 
  google.setOnLoadCallback(function() {
        $("#buggedTable td").click(function(){
                var el = $(this);
                
                if (el.text() == "New value") {
                    el.text("Newer value");
                }
                else {
                    el.text("New value");
                }
        });
    });
</script>
...
<style type="text/css">

    #buggedTable 
    {
        table-layout: fixed;
        border-collapse: collapse;
        border: 1px solid black;
        width: 100%;
    }
    
    #buggedTable td, th 
    {
        border: 1px solid black;
        overflow: hidden;
        white-space: nowrap;
    }
        
    #buggedTable td > input
    {
        max-width: 99%;
        display: inline;
        margin: 0;
        padding: 0;
    }
    
</style>
...
<table id="buggedTable">
    <colgroup>
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: 100px;" />
        <col style="width: auto;" />
    </colgroup>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1-1Value 1-1Value 1-1</td>
            <td>Value 1-2</td>
            <td>Value 1-3</td>
            <td>Value 1-4</td>
        </tr>
        <tr>
            <td>Value 2-1</td>
            <td>Value 2-2</td>
            <td>Value 2-3</td>
            <td>Value 2-4</td>
        </tr>
        <tr>
            <td>Value 3-1</td>
            <td>Value 3-2</td>
            <td>Value 3-3</td>
            <td>Value 3-4</td>
        </tr>
        <tr>
            <td>Value 4-1</td>
            <td>Value 4-2</td>
            <td>Value 4-3</td>
            <td>Value 4-4</td>
        </tr>
        <tr>
            <td>Value 5-1</td>
            <td>Value 5-2</td>
            <td>Value 5-3</td>
            <td>Value 5-4</td>
        </tr>
    </tbody>
</table>

Try that code out here with Internet Explorer 8 and see what you think.  Just randomly click on cells like a mad man until you get it to misbehave.  Eventually, you should see something like this:

It’s subtle, but you can probably see that the lines between the columns no longer line up correctly on a few of the cells.

The culprit is the “table-layout:fixed” style.  Without that style, the table cells do not resize.  Unfortunately, liteGrid has to have that functionality, otherwise columns can’t be resized to be smaller than the longest cell value. 

“But Matt, you are using jQuery!  Couldn’t it be a jQuery bug?!?”

No. 

“Are you sure?”

Yes.

“Oh yeah?!?  PROVE IT!”

Alright, so I can’t prove it, but I can demonstrate the bug without using JavaScript!  Go back to my example, and get one or more cells to contract.  After that, start randomly dragging a selection through the table cells.  You’ll notice that the cells sometimes snap back to the correct width, while other cells randomly contract.  You can inspect the cells with the IE8 Developer Tool to confirm that the width is indeed shifting for no apparent reason.  If that’s not a rendering bug in IE8, I don’t know what is.

“Ok, so what now?”

I’m not sure.  I’ve made a couple of posts (here and here), and I’m hoping one of them will net something useful.  If not… too bad IE.  That’s right, I’m not going to waste any more energy trying to fix this.  liteGrid still works in IE, you just occasionally get some artifacting while editing cells.  I can’t do anything about that; I’ve tried (and failed).  This is something Microsoft is going to have to fix in their buggy, standards-ignoring browser. 

What I can do though is add a new liteGrid module that will politely suggest that users install a real browser, such as Firefox or Chrome.  Look for that module Real Soon Now.