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