Positioned content is obscured by column
Reported by
kamil.le...@aviso.io,
Jul 14 2017
|
|||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3118.0 Safari/537.36 Steps to reproduce the problem: 1. Open the file attached 2. Notice missing "x" next to any <li> that is not in the left-most column. What is the expected behavior? "x" should be present next to every <li>. What went wrong? "X" is missing whenever I use "column-count" and absolutely positioned li:before content. This works just fine in Firefox (53.0). Did this work before? N/A Does this work in other browsers? Yes Chrome version: 61.0.3118.0 Channel: canary OS Version: OS X 10.11.6 Flash Version: Shockwave Flash 26.0 r0 Reproducible in both latest Chrome (59.0.3071.115) and in Canary.
,
Jul 14 2017
Able to reproduce this issue on Chrome Beta#60.0.3012.66 for 'Win7' as well.
,
Jul 17 2017
Able to reproduce the issue on Windows 10, Ubuntu 14.04 and Mac 10.12.5 with chrome Stable #59.0.3071.115, Beta #60.0.3112.66, Dev #61.0.3153.0 and Canary #61.0.3159.0 Observed different behavior in earlier chrome versions, attaching the screenshots for reference. Unable to find the good behavior in earlier version of chrome , hence untriaging this issue for further triage from dev team.
,
Jul 19 2017
Note that the 'x' is there, but it has been absolutely positioned by -20 pixels, and is being obscured by the columns to the left. Here is a simpler example that doesn't involve :before. Set the -20px to 0px here https://jsfiddle.net/ah45rsw1/1/ Testing on Windows, Edge does the same thing as Chrome, while Firefox is different. Assigning to the layout team for their expertise here.
,
Jul 27 2017
,
Jul 28 2017
https://www.w3.org/TR/css3-multicol/#overflow We clip at column gaps (there's no column gap to the left of the first column, which is why the first column shows the "x"es, while they are clipped away in the other columns (blink-bug.html). This behavior agrees with Edge, but not Firefox. Firefox doesn't clip at column gaps. What Firefox does is actually suggested behavior in an editor's draft of multicol level 2. https://drafts.csswg.org/css-multicol/#overflow The current wording is: "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." I.e. quite a drastic divergence from what's stated in the CR version of the spec. For now Blink will follow what's in the CR.
,
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 lgrey@chromium.org
, Jul 14 2017