- From: Alan Gresley <alan@css-class.com>
- Date: Tue, 21 Jan 2014 22:00:37 +1100
- To: "Jens O. Meiert" <jens@meiert.com>, W3C WWW Style <www-style@w3.org>
On 21/01/2014 11:39 AM, Jens O. Meiert wrote: > What’s considered the “home” of the overflow-x and overflow-y > properties, which are (unlike overflow-style which is instead > specified in CSS Marquee as well, see other mail) both featured in > both CSS Basic Box Model [1] and the CSS Overflow Module [2]? > > > [1] http://www.w3.org/TR/css3-box/ > [2] http://www.w3.org/TR/css-overflow-3/ The various specs has a *major bug* in respect to what is overflow. For css3-box, we have the following for 'visible', 'hidden', 'scroll' and 'auto': | These properties specify whether content is clipped | when it overflows the element's content area. The 'content area' is in reference to the 'containing block' of the parent. A child element is not clipped at the 'content edge' of the parent but rather at the padding edge (minus the width of the scroll bar if one is provided). Due to this unclear language, we have two contradictory notions of overflow. 1. Once a child overflows the *content area* of it's parent, the values for overflow says how the child element is clipped by the parent's *padding edge*. 2. Once a child overflows the *padding area* of it's parent, the values for overflow says whether the overflowing content of the child is visible via scrolling or is hidden. In the following code, the lime background shows 'padding area' of the parent. The purple background (partly transparent blue over red) shows the 'content area' of the parent. The teal background (partly transparent blue over lime) shows the child that is overflowing the 'content edge' of the parent by traversing the padding area before being clipped at the 'content edge' of the parent. Since the value for overflow is scroll, then the clipped out content of the child can be accessed by scrolling. <!DOCTYPE HTML> <div style="overflow:scroll; width:200px; height:200px; padding:50px;background: lime linear-gradient(red,red) no-repeat;background-origin:content-box;"> <div style="height:300px; width:300px; background: rgba(0,0,255,0.5);"></div> </div> -- Alan Gresley http://css-3d.org/ http://css-class.com/
Received on Tuesday, 21 January 2014 11:01:09 UTC