324029 - overflow-x and overflow-y not distinguished from overflow

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Rocco Stanzione]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

If I apply the following CSS to a div:
 overflow-x: visible;
 overflow-y: auto;
the div behaves as if I had said:
 overflow: auto;
I get the same behavior if I reverse x and y, and no combination of overflow-x and overflow-y yields the correct behavior.  My test case is a set of nested divs where the child divs are draggable via scriptaculous.  The overflow property causes the parent div to overflow so that the child is still within it, causing undesired dragging behavior.  Specifying overflow behavior per-axis solves the problem in Internet Explorer, Opera and Safari, as I expected.  Konqueror doesn't seem to understand overflow-* at all.

Reproducible: Always

Steps to Reproduce:
Create a div and assign it the css properties overflow-x: auto; and overflow-y: visible; width: 100%; height: 5em;.  Fill it with enough javascript-draggable items to overflow it on the y axis, so vertical scrollbar appears.
Actual Results:  
The div behaves as if I had said overflow: auto;
Dragging the child in any direction (on any axis) causes the parent (with per-axis overflow set) to overflow to contain the child.  Visually, the draggable element disappears behind the page.

Expected Results:  
Dragging a child on the overflow: visible axis (the x axis in this case) should not cause the parent to overflow to contain it.  The draggable element should remain visible.

Every browser tested except Konqueror (Internet Explorer, Opera and Safari) behaved correctly.

Comment 1

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

You can't do this; see http://www.w3.org/TR/css3-box/#the-overflow-x .

There are good reasons for such a prohibition:  boxes with 'overflow: visible' behave very differently from other values of overflow regarding floats, etc.  Never mind that having material cross over a scrollbar just doesn't make much sense.  (Is that what the other browsers do?  You just said it "works", and you didn't attach a testcase.)

Comment 2

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

(Note that the draft is a bit out of date, 'hidden' is now a lot more like 'auto' and 'scroll'.)

Comment 3

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

The dragging bug you're describing could be a bug, though, but it's impossible to tell without a testcase.

I'm also a bit surprised that Opera and Safari (esp. Opera) support overflow-x and overflow-y at all.