664275 - mixed CSS overflow allows user to scroll to hidden content using keyboard or mouse's scroll wheel

Status: RESOLVED DUPLICATE of bug 325942

(Core :: Web Painting, defect)

Description

[Lucas Sanders]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a2) Gecko/20110614 Firefox/6.0a2
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:6.0a2) Gecko/20110614 Firefox/6.0a2

An element assigned the CSS properties overflow-x: hidden and overflow-y: scroll (or auto) is expected to prevent the user from scrolling horizontally to view clipped content.  As a result, such an element displays a vertical scroll bar but *not* a horizontal scroll bar.  Unfortunately, this constraint is not enforced when scrolling the element with the keyboard or, in certain circumstances, with a mouse's scroll wheel.

When scrolling the element with a mouse's scroll wheel, the bug only manifests itself when the user successively scrolls the element vertically, then horizontally, using the scroll wheel.  Users are particularly likely to do this when using Apple's standard mice and trackpads, since anything other than a perfectly vertical or horizontal motion results in "diagonal" scrolling, represented by successively scrolling in the horizontal and vertical directions.  If the user uses the vertical scroll bar to scroll the element, that action prevents further horizontal scrolling with their mouse's scroll wheel until they have once again used the scroll wheel to scroll the element vertically.

This issue can be partially worked around by nesting the problem element inside an absolutely-positioned element with a fixed width and overflow: hidden.  This workaround prevents the keyboard scrolling variant of this bug.  Even with the workaround, users can scroll horizontally using a mouse's scroll wheel after scrolling vertically with their scroll wheel -- although this workaround does snap the view back to the far-left horizontal scroll position when the user subsequently uses the scroll bar for vertical scrolling.

Reproducible: Always

Steps to Reproduce:
If you have a horizontal scroll wheel on your mouse (or other pointing device):

1. Visit testcase.
2. Use the scroll wheel to scroll the page vertically.
3. Use the scroll wheel to scroll the page horizontally.

Alternatively, if you have a keyboard with arrow keys:

1. Visit testcase.
2. Use the keyboard's arrow keys to scroll horizontally.

Actual Results:  
The user is able to scroll the page horizontally to view clipped content.

Expected Results:  
The user should not be able to scroll this page horizontally.

I will attach two simplified testcases:  one demonstrating the bug and the other demonstrating my partial workaround.

This bug is present in release builds of Firefox 3.x and Firefox 4, as well as the most recent Aurora build.

Comment 1

[Lucas Sanders]

Attachment: simplified testcase

Attaching a simplified testcase to demonstrate this bug's behavior.

Comment 2

[Lucas Sanders]

Attachment: partial workaround

Attaching a simplified demonstration of my partial workaround to mitigate this bug's behavior.

Comment 3

[Lucas Sanders]

A real-world use case can be found at http://www.mainerural.org/inspireme/

This page uses my partial workaround, so is not susceptible to improper keyboard scrolling, etc.