Mouseover/hover effect slow on IE8

Question

I have noticed a weird performance thing in IE8 when using mouseover events on a table with many rows (100 in this example). I have tried a lot of different approaches but I can't seem to find any way to get it as fast as I like/need.

If I switch classes on each event the performance goes down in all IE versions, and If I use direct manipulation of the CSS through javascript IE6 and IE7 speeds up alot, but IE8 still performs lousy.

Any ideas ? I would really like to know what it is that makes the mouseover event to perform so sluggish compared to all the other browsers.

If this only happened to IE6 I could understand and let it pass, but when the newest version of the browser is the slowest one, there is only going to be more and more users with a bad experience.

Example using JQuery hover: http://thedungheap.net/research/

EDIT: I have now updated the example so that it is easy to see the difference between having 10 rows and 200. This is in the same document, so this cannot be a problem with the whole DOM size, i guess

Answer 1

The :hover IS very slow on IE8, no matter how you intend to implement it. In fact, the javascript onmouseover, onmouseout events provides way faster methods for creating a hover effect, than CSS does

Fastest example on IE8:

<table>
<tr style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor='#000000'" onmouseout="this.style.backgroundColor='#FFFFFF'">
   <td>foo bar</td>
</tr>
</table>

Slower example:

<style type="text/css">
   tr.S1    {background-color:#000000}
   tr.S2    {background-color:#FFFFFF}
</style>
<table>
<tr class="S1" onmouseover="this.className='S2'" onmouseout="this.className='S1'">
   <td>foo bar</td>
</tr>
</table>

VERY slow example: JSFiddle

<style type="text/css">
   tr.S     {background-color:#000000}
   tr.S:hover   {background-color:#FFFFFF}
</style>
<table>
<tr class="S">
   <td>foo bar</td>
</tr>
</table>

Answer 2

Btw for all browsers you can use :hover selector using css only. And only for IE6 you can add your fastest soluton.

Answer 3

Try using event bubbling. Add the hover event to the table only, and then look at the target element.

$(function() {
    $('table').hover(function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#ffc000');
    }, function(e) {
        $(e.originalTarget.parentNode).css('backgroundColor', '#fff');
    });
});

Answer 4

Have you tried to see what happens if you only have one per row? Curious if it is the number of elements in the DOM [or in each row] could affect performance. Otherwise, it could be an issue with the way ie8 traverses tags in the selector engine. Not really an answer, but something to try.

No IE8 or I'd try it myself.

Answer 5

Seems fast enough to me, without actually looking at metrics.

You could try mouseover/mouseout instead of toggling. You could also try event delegation, which often helps with this many elements in the dom.

    $("tr").mouseover(function() {
            $(this).css('backgroundColor', '#ffc000');
        })
        .mouseout(function() {
            $(this).css('backgroundColor', '#fff');
        });

Answer 6

I have faced this issue and implemented the following workaround

var viewTable = jQuery("table.MyTable");
var temDiv = jQuery("<div class=\"HighlightClass\" style=\"display:none\"></div>").appendTo("body");
var highlightColor = temDiv.css("background-color");
viewTable.mouseover(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color", highlightColor);
}).mouseout(function(eventObj){
    jQuery(eventObj.target).parents("tr:first").css("background-color","");
});

I hope this could be useful for you.

Answer 7

Sorry to post on an answer this old but I think it is relevant and this page is well ranked by google so...

Wow, I just spent a great amount of time on this problem, I tried to use Javascript, but it was still slow.

This is a solution if you use background images :

This was a real issue for me, because the project I had this problem on was the hover effect on Left and Right buttons / arrows that I use to animate tabs left and right, the tabs would go under the buttons, a tab slideshow if I may say and when the cursor entered the button area the normal image would disappear, the image below would be visible for a few millisecs and then, the hover image would eventually display, ugly.

The real solution was to use image sprites, that way there is absolutely no lag even in pure css. The idea is to have a single image with all the differents images states insides (normal / hover / selected / inactive / etc), you set the image as background-image, and you just adjust the background-position value for the hover effect and others.

If you want to know better about css sprites : http://css-tricks.com/css-sprites/