Issue metadata
Sign in to add a comment
|
CSS 3 Column bug. Clipping absolute elements and break its other column
Reported by
k.koro...@abbyy-ls.com,
Dec 30 2016
|
||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 Example URL: Steps to reproduce the problem: 1. Create a container with CSS3 columns 2. Position an element relative inside the columns 3. Position an element inside the relative positioned element and position that absolute What is the expected behavior? The elements display outside column boxes and dont break to other column What went wrong? The absolute positioned elements are clipped as if there is an overflow: hidden applied to the box. However, applying overflow: visible or any other rule does not fix the problem. https://jsfiddle.net/f4nd7tta/41/ And its elements break inside and move itself of part to other column. https://jsfiddle.net/f4nd7tta/42/ Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 55.0.2883.87 Channel: stable OS Version: 6.3 Flash Version: Shockwave Flash 24.0 r0
,
Dec 30 2016
,
Jan 2 2017
,
Jan 3 2017
I see no problems in https://jsfiddle.net/f4nd7tta/41/ - I see red dots to the right of every grey rectangle. Isn't that what we're supposed to see? Note that break-inside:avoid (FYI: "column-break-inside" is not a valid property name - it's "break-inside") does *not* mean that it's *forbidden* to break inside an element. We'll still insert breaks at valid class A, B or C [1] break points to prevent column overflow. https://jsfiddle.net/f4nd7tta/42/ has a multicol container with relatively positioned children. Each relatively positioned child has an absolutely positioned child. The containing block for those absolutely positioned objects is their relatively positioned parent, whose containing block is the multicol container. As such, the absolutely positioned objects also take part in the fragmentation context. So I don't think we're doing anything wrong here either. [1] https://drafts.csswg.org/css-break/#possible-breaks
,
Jan 9 2017
Strange, here https://jsfiddle.net/f4nd7tta/41/ what I see http://take.ms/ZBG1P Maybe you watch an example on the screen with high resolution, excuse me for this mistake. https://drafts.csswg.org/css-multicol/#overflow "Floated or in-flow content that extends into column gaps or neighboring columns — e.g., long words or images — is not clipped and may therefore cause overflow." however what we see in Chrome https://jsfiddle.net/9a276nbd/ http://take.ms/JNViO And https://drafts.csswg.org/css-multicol/#pagination-and-overflow-outside-multicol "Content and column rules that extend outside column boxes at the edges of the multi-column element are clipped according to the overflow property." however what we see https://jsfiddle.net/mqr25637/ http://take.ms/ziU3Z Why absolutely positioned objects are a part of fragmentation context in multicol element, and where I may read about? multicol container don't create new document with own flow and it is a part of a normal flow of the document as well as his childrens. And as we know absolutely positioned elements "removed from the normal flow entirely (it has no impact on later siblings)" https://www.w3.org/TR/CSS2/visuren.html#absolute-positioning It is mean absolutely positioned elements have to be removed and from multicol container, if it is so possible to tell. I consider, page fragmentation https://www.w3.org/TR/css-break-3/#transforms it is not same for absolutely positioned elements then any other fragmentations context created by line break or column break, example for line break, https://jsfiddle.net/rao3kubm/ http://take.ms/zNp2G in this example absolutely positioned element have relatively positioned parent and both of them are located inside linebox(like column box), but this absolutely positioned object isn't a part fragmentation context. I very much you ask to look narrowly at this problem once again. Similar behavior absolutely positioned elements in multicol conteiner strongly limits use of them with css multicol in real projects.
,
Jan 9 2017
Yeah, my browser window is 1600px wide, so I missed this. If I make the window narrower, I can indeed see that the red dots get clipped at column boundaries. This is a spec violation according to the Editor's Draft of multicol. However, Blink follows the CR version of the spec here, which says roughly the opposite: https://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements "Content in the normal flow that extends into column gaps (e.g., long words or images) is clipped in the middle of the column gap." Of course, in the test, the red dot is an out-of-flow object, so one might claim that the above rule doesn't apply. Then again, the out-of-flow object is contained by an in-flow relatively positioned object, which is contained by the multicol container, so it really makes sense to me to clip it. According to CSS 2, the containing block of an absolutely positioned object is the nearest ancestor that has a "position" different from "static", e.g. "relative". In the test, that is the parent. See https://www.w3.org/TR/CSS22/visudet.html#containing-block-details . Later CSS modules extend this somewhat, so that e.g. the nearest ancestor that establishes a transform also serves as a containing block for absolutely positioned descendants. It is true that absolutely positioned objects should not affect siblings or ancestors (with a few exceptions), but they ARE affected (and clipped) by ancestors. <p>There should be no red here.</p> <div style="position:relative; overflow:hidden; width:100px; height:100px;"> <div style="position:absolute; left:100px; width:100px; height:100px; background:red;"></div> </div>
,
Jan 9 2017
Thank you for the detailed answer. I apologize for the fact that has taken away from you time, today the condition of the specification are disappoints. Let's hope, that these mistakes in the specification will correct soon.
,
Jan 14 2017
,
Dec 6 2017
We should consider implementing what the spec says now (don't clip anything automatically), rather than what it used to say (clip at column gaps), so marking as duplicate rather than wontfix. https://www.w3.org/TR/css-multicol-1/#overflow-inside-multicol-elements 8.1. Overflow inside multicol elements Except for cases where this would cause a column break, content that extends outside column boxes visibly overflows and is not clipped to the column box. |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by k.koro...@abbyy-ls.com
, Dec 30 2016