Hovering rows in a table in Internet Explorer is slow with any doctype

Ok, this one is driving me crazy.

I have a html table with about 100 rows. I want the rows to change color when you move the mouse above it.

I tried :

:hover in CSS,
onmouseover/onmouseout events in javascript
jquery .hover
jquery .mouseover/.mouseout
mouseover on the table with e.target etc

All work perfectly fast in Firefox, and terribly slow in IE7/IE8. No matter what doctype I tried. But if I remove the doctype of the page entirely (quirks) then it's very fast in IE as well !

Unfortunately having no doctype is not acceptable for me, since I use other (jquery ui) components that seem to like a doctype (otherwise these get slow in IE!)

Any suggestions?

to test :

quirks mode (fast hovering in IE) : http://www.watikwil.nl/test_quirks.html

strict mode (slow hovering in IE) : http://www.watikwil.nl/test_strict.html

UPDATE: I found that using a background-image for the hovering row is actually FASTER in IE than using background-color !! But this only works fast when using :hover. The jquery or javascript methods don't work fast. It's still not as fast as Firefox, but acceptable to me.

*UPDATE 2: Still having problems. In IE8 it's still too slow, especially when having multiple classes on rows (as JqGrid does) *

UPDATE 3: Somehow I've got it working now with IE8. Diabled some classes JqGrid uses, don't know anymore if that made the difference. I'm using :hover with a background-image. The thing is, when I force the page to use IE7 Standards mode, it's noticably faster. But when I try the same page in IE7, it's VERY slow again... really driving me insane...

Edit Report

1 Answer

Yes, I too experience this problem, and table rendering speed has been a problem in IE forever. You'll notice a CPU peg (50% usage by IE on my dual) as you drag the mouse around.

You can, however, use text-decoration: underline on CSS:hover without causing this table recalculation effect.

I understand Rob's comment that the doctype is unrelated (and holy), but it is wishful thinking. The problem is easily reproducable with a very spartan table, with no cell attributes or individual row attributes besides :hover CSS. Of course, measuring the effect of DOCTYPE on this is difficult, since when you turn off STRICT you disable IE's ability to apply :hover to non-link elements. Drawing underlines on text with a plain CSS border and no javascript or CSS expressions etc. on the page also causes the problem, however, text-decoration does not. Apparently IE suppresses table recalculation specifically for that CSS rule, in-case you have links in your table. (In other words, MS developers knew about the problem before releasing the defect the first time, and it's still in there 2 major versions later. How nice :).) So, here's a cooler test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css">
    a:hover { text-decoration: line-through; }
    a:hover { line-height: 1.1em; }
</style></head><body><table><tbody>
    <tr>
        <td><a href='#'>Test</a></td>
etc.

Note that, above, you don't see the problem if you remove the 'line-height' CSS rule, or if you switch to DOCTYPE TRANSITIONAL. Also note it depends heavily on your CPU how many cells you need. Also note it is the total number of cells, either in rows or columns (OR multiple tables!), that cause this poor performance rendering IE ta

answered 2010-11-04T13:04:23.493

Hovering rows in a table in Internet Explorer is slow with any doctype

1 Answer

Your Answer