W3C home > Mailing lists > Public > www-style@w3.org > February 2009

Re: Proposal for overflow painting order

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Wed, 04 Feb 2009 20:46:50 -0800
Message-ID: <498A6F3A.2040206@terrainformatica.com>
To: David Hyatt <hyatt@apple.com>
CC: "www-style@w3.org List" <www-style@w3.org>
David Hyatt wrote:
> I'd like to propose a change to the painting order of overflow objects.
> In this example:
> <div 
> style="width:100px;height:100px;background-color:red;margin-bottom:-100px">This 
> text paints on top of the overflow block.</div>
> <div 
> style="width:100px;height:100px;overflow:hidden;background-color:green;"></div>
> The overflow block is allowed to interleave with the previous block. 
>  Although its background is on top of the previous block, the previous 
> block's text paints on top of the overflow block's background.  This is 
> correct according to the current painting order rules, which do not 
> special case overflow.  However, this leads to strange renderings, 
> especially when scrolling mechanisms are present.  The partial 
> overlapping also makes it more likely that scroll blitting will have to 
> be disabled.
> I'd prefer to see overflow special-cased such that it does not 
> interleave with other normal flow content by default.  I don't think 
> there is any real benefit to be gained by allowing such interleaving. It 
> is also more difficult to encapsulate the painting of the overflow 
> (e.g., if you wanted to optimize it for accelerated compositing) if the 
> overflow block has to break up its painting because of surrounding 
> normal flow content.
> The above test case does support interleaving in IE8 (standards mode), 
> Firefox and Opera.  Interleaving is not the behavior you get in IE7 or 
> WebKit. 
> If this idea appeals to others, I can work on producing the new language 
> for 
> http://www.w3.org/TR/CSS21/zindex.html
> dave
> (hyatt@apple.com <mailto:hyatt@apple.com>)

While we are on this page.

I think we have bug in specification regarding negative margins and 
stacking order.

Attached is the illustration that demonstrates layout of three
DOM elements with the one in the middle having

margin-top: -10px;
margin-bottom: -10px;

I think that its stacking order is slightly larger (as shown on the 
illustration) than its normal siblings thus it will be drawn on
top of *both*, previous and next, its siblings.

Andrew Fedoniouk.


(image/jpeg attachment: negative-margins.jpg)

Received on Thursday, 5 February 2009 04:47:29 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC