Menu
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.
I do not call any extra onmouseover,onmouseout, etc.. on any
of these elements.
I've turned off all animations in jQuery.
Hiding all elements on the page except for the jstree(for example) does make the hover effect slightly faster, but nothing really noticable.
Using the IE8 Debuggers profiler does not show any significant overhead, only normal times in the jQuery sizzle.js are noticeable
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.
695
The CSS :hover selector is one of many pseudo-classes that are used to style elements. :hover is used to select elements that users hover their cursor or mouse over. It can be used on all elements, not only on links.
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
To solve the issue, you need to go over the CSS hover code to establish if you use the right selector. As well, ensure you use an opening curly bracket ({) after each selector and a closing curly bracket (}) at the end of the property list.
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
172
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
