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!!!

7 Responses to “Internet Explorer bug: Broken mouse wheel scrolling”

  1. Gravatar: Tina Tina Says:

    Man you don't even know how long I've waited for this since disabling my own Movable Type widget (that doesn't work since Haloscan bypasses that code).


  2. Gravatar: how to build your own bui how to build your own bui Says:

    Get in contract here for professional tenant improvements construction that is available for construction projects and ready to do your job at the top quality. Ask for a bid today!

  3. Gravatar: visit website here visit website here Says:

    Get service from the wonderful asset management whitefish that is currently available and very reputable now!

  4. Gravatar: auto injury law auto injury law Says:

    Find now the top professional nebraska injuries that is available for you now!

  5. Gravatar: design steel buildings design steel buildings Says:

    Get in contract here for licensed and bonded metal building erectors that's available for construction projects and ready to do your job with top quality. Ask for a bid today!

  6. Gravatar: investment management investment management Says:

    Get Services From the amazing financial advisors whitefish that is now available in addition very reputable now!

  7. Gravatar: facebook marketing compan facebook marketing compan Says:

    Get Service From the amazing facebook for local business that is now available and on sale today!

Leave a Reply

remember my information