IE7 Scrolling Is Slower If Hover Pseudo CSS Classes Are Used on the Page

This has been something like a tale of the unexpected for me. A client recently reported a problem with scrolling being slow in IE when the mouse wheel is used. It took about two afternoons of testing different scenarios and head scratching, and this is where we got: it seems that if a :hover pseudo CSS class is used on the web page, scrolling in IE7 becomes slower, even if the CSS selector, which contains the :hover pseudo class does not select anything, i.e. the CSS rule is not relevant to any of the web page elements.

The longer the page, the more the scrolling lag is noticeable.

I have attached a simple test page to demonstrate the above. In order to see the difference, you should use the mouse wheel to scroll briskly up and down the test page in Internet Explorer 7. There is a CSS rule in the HEAD section of the page, which uses a :hover pseudo class. If the rule is commented out, IE7 will start scrolling  faster. You can test this with Javascript turned off, the results will be the same.

IE6 doesn't seem to exhibit the problematic behavior.

IE7_SlowScrolling