:hover in IE7.... sucks....

I had some interesting findings while trying to figure out why mouse-event-based hover behaviors were so slow in IE7 for a DHTML web application on a major website that uses mouseover/mouseout events to change the background color of a table row. All other browsers (including IE6) did this lightning fast, even with very large tables. However, IE7 sucked major ass, even when tables were only 20 to 30 rows. (also note that for optimal performance in IE do this by changing the inline style backgroundColor property explicitly vs. swapping out style classes. That was another lesson learned on another day) ...anyway...

So one of the first things I tried was to remove all javascript and CSS payload from the page (stripped down to bare markup), and added just enough javascript back in to handle the row highlighting on mouseover/mouseout. When I did this suddenly the row highlighting was rocket fast again! So I added the CSS back into the payload. Slow. Aha!! Frak!! Now what? Then I started a process of pulling the CSS back-in in bite-size chunks to see what CSS might be causing the slow down. This took several hours as the site has a very large CSS payload, but once I figured out the pattern this started to go much faster. Turns out any selectors in the payload that had ":hover" psuedo-classes that weren't specifically targeting anchor tags, slowed down mouse events for IE7 (in standards mode only). This was even for selectors that would end up not selecting anything in the DOM because they were scoped in such a way as to only be pertinent to non-IE browsers. And it only took 1 selector to slow down the page. Every single one had to be removed before it sped back up to normal performance.

So in summary, when pushing alot of CSS payload into a document, and you see sucky performance in IE7 mouseover/mouseout event speed, make sure your CSS payload
is GOOD, and not BAD . . .

BAD BAD BAD (not explicitly targeted to anchor)

• :hover { . . . }
• .foo:hover { . . . }
• #foo:hover { . . . }
• div.foo:hover { . . . }

GOOD (explicitly targeted to anchor)

• A:hover { . . . }
  
• A.foo:hover { . . . }
• A#foo:hover { . . . }

Good luck, hope this helps someone. God I hate IE.