[css3-multicol] overflow inside multicol elements

I've been looking at the way various browsers handle overflow in a multicol 
element, and every one of them appears to handle things differently. I'm 
unsure which, if any, is correct.

As a test case, I created a two-column, constrained-height container, with a 
number of single-line paragraphs of text, which were relatively positioned 
in different ways so as to overflow the various boundaries of the container.

You can see the test case here: http://codepen.io/j4_james/pen/DqFbK

I tested this on Windows builds of the following:
- Firefox 19
- Chrome 25.0.1364.97
- Opera 12.14 (build 1738)
- IE 10 (via NetRender)

As far as positioning goes, I would have expected the items simply to be 
moved in the specified direction, and for most that was the case. On Chrome, 
however, items were moved within the flow of the columns - so, an item with 
a negative top property at the top of the second column, would be moved back 
into the first column rather than up out the top of the multicol container.

For elements that overflowed vertically (i.e. out the top or bottom of the 
multicol container), IE and Firefox both displayed the entire element; Opera 
displayed all of the text content, but clipped the background, and 
constrained the outline to the edge of the container; and Chrome clipped any 
part of the element that was outside the container.

For elements that overflowed horizontally (i.e. out the left or right of the 
multicol container), IE, Firefox and Opera displayed the entire element, but 
on Opera the element wouldn't contribute to the overflow width of the page 
itself (so if the item was positioned off screen there would be no scroll 
bar); and Chrome clipped any part of the element that was outside the 
container.

For elements that overflowed into the column gap, Firefox displayed the 
entire element; IE and Opera clipped the element at the middle of the column 
gap (although Opera constrained the outline rather than clipping it); and 
Chrome clipped the element at the edge of the column (i.e. before the column 
gap).

I then tried adding a float:left to all the paragraphs to move them out the 
normal flow to see if that would make any difference.

Test case here: http://codepen.io/j4_james/pen/xtrJI

On Firefox and Chrome this made little difference. On IE, everything in the 
second column just ignored all positioning, but the first column was 
unchanged. On Opera, everything that should have been in the second column 
overflowed out the bottom of the first column, but at least we also got all 
clipping disabled, which is kind of what I was hoping for.

Based on my reading of the spec, IE and Firefox are the closest to getting 
it right. I'm assuming that without the float set, Firefox should have been 
clipping elements in the column gap; and with the float set, IE should *not* 
have been clipping those elements (and obviously also not borking the second 
column).

Chrome seems completely wrong to me, both in its positioning and its 
clipping. Opera at least got the column gap clipping right I think - not 
sure how outlines should be effected though.

Is that interpretation correct, and should bugs be filed with the various 
browsers? Would it help if the spec had some clarification on how overflow 
should be handled outside the borders of the multicol container (as opposed 
to overflow in the column gaps)? Or is some of this behavior intentionally 
left undefined?

I don't have nightly builds of anything, so apologies if any of these 
implementations have been changed/fixed.

Regards
James

Received on Monday, 4 March 2013 14:19:14 UTC