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:
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?!?”
“Are you sure?”
“Oh yeah?!? PROVE IT!”
“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.
Just replace all rendering code with this single hyperlink:
You’re going to ban me from comments at some point.