Internet Explorer bug: Broken mouse wheel scrolling

One of the things I encountered today was a problem with scrolling some part of a website with the mouse wheel. It worked fine in Firefox and Opera but Internet Explorer refused to scroll correctly. The content I was trying to scroll within was a div tag, which was configured with the CSS property "overflow: auto".

After doing some testing I discovered that the mouse wheel scrolling would only work when the mouse cursor was hovering the text in the div tag. When the mouse cursor was hovering just some white space above or below a paragraph the scroll wheel refused to work.

At first I thought this issue was caused by Opens external link in new windowFleXscroll which is a piece of javascript which I use to customize the design of scrollbars, but after disabling FleXscroll the issue remained and after doing some more testing I discovered that this bug would only occur when the page was rendered in standards-compliant-mode. After removing the DOCTYPE and thus triggering quirks-mode, the bug was gone and everything worked fine except that my page looked like shit since everyone knows quirks-mode is the root of all evil.

So I put the DOCTYPE back in and tried to figure out some other way to fix this issue. Since the scrolling would only work when the cursor was hovering some text I thought that maybe it just needs to hover something, even if that something looks like nothing (you're thinking: what?!), so I added "background: #ffffff" to the style of the div tag and guess what? Problem solved.

Checkout this page demonstrating the bug which contains to similar content items, the only difference is the background property. If you use Internet Explorer you will notice that you cannot scroll one of the items with the mouse wheel unless your mouse cursor is over some part of the text.

This bug occurs in Internet Explorer 7 and possibly lower versions too.

Why!!! Internet Explorer why!!!


herinner mij