[css3-multicol] column rule drawing order

Hi www-style,

About column rule drawing order, The multicolumn spec currently says, "Column rules are painted just above the background of the multicol element. This allows child elements with 'z-index' values to be on top of column rules."[1]

If I understand the z-index bit correctly, it's saying that when the multicol element is a stacking context (e.g. has 'position:relative' and 'z-index:0') and there is an absolute positioned element with 'z-index:-1', the absolute positioned element should be drawn above the column rule.

I made a test case[2] to test this, whether rules draw above or below borders, and whether rules scroll with content; this is what I see:

IE 10: column rules draw below 'z-index:-1' items, draw below borders, don't scroll with content unless 'background-attachment:local' is specified
Chrome: column rules draw below 'z-index:-1' items, draw above borders, don't scroll with content
Firefox: column rules draw below 'z-index:-1' items (case 3), draw above borders, scroll with content but don't consistently draw in overflow 
Opera: column rules draw above 'z-index:-1' items, draw above borders, scroll with content

Should column rules scroll with content?  The only sensible answer seems to be yes, but I don't think the spec explicitly addresses this.  If they scroll with content, it seems more natural to draw with the content, rather than the background.  If we're drawing with the content, should we consider relaxing the z-index requirement, as Opera has?  Opera also seems to be the only browser that behaves correctly under scrolling (IE and Chrome don't scroll the rules, and Firefox doesn't consistently draw them when scrolled).  This would also mean that rules should definitely draw above borders (which every browser but IE already does).

Peter

[1] http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules
[2] http://jsfiddle.net/XXW2J/

Received on Saturday, 19 January 2013 00:08:32 UTC