Why is CSS Hover Slow In IE8?

Question

I have a page with a jstree and/or jqgrid - it really doesn't matter which one I use to show my point, as I suspect it's any hover effect in IE8... Back to point:

When hovering over an <a> tag the background-color is changed with CSS. In all browsers, including IE7 (although slightly slower - I'd guess +-300ms) there is no lag in the background change, but in IE8 the lag can get up to, and over, 1 second.

1. I do not call any extra onmouseover,onmouseout, etc.. on any of these elements.

2. I've turned off all animations in jQuery.

3. Hiding all elements on the page except for the jstree(for example) does make the hover effect slightly faster, but nothing really noticable.

4. Using the IE8 Debuggers profiler does not show any significant overhead, only normal times in the jQuery sizzle.js are noticeable

5. This is after all document elements have been loaded and no extra calls are made to servers, no new images are downloaded,etc..

Any advice on improving this, eg: performance tests, tag selection, etc.. would be appreciated greatly.

Regards, Byron Cobb.

P.S. This question asked previously by bobmoff didn't really answer anything.

EDIT:

Further tests have shown that the jquery .hover() and binding mouseenter and mouseleave are also equally as slow in IE8. For example - I have removed everything on the page except for my jqgrid and the hover effect is still slow(although a slight increase is observed)

Running IE8 in compatibility mode also fixes this slow hover issue.

Answer 1

Not an exact duplicate, hence not flagged as such, but this stackoverflow article 'Mouseover/hover effect slow on IE8' may help you.

I also found some more help here: http://boardreader.com/thread/Javascript_CSS_IE8_problem_MouseOver_ver_bd40Xr0fw.html