Multicol spanning element late in content causes rendering issue
Reported by
m...@rachelandrew.co.uk,
Mar 14 2018
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36 Steps to reproduce the problem: Open the example, or this CodePen (https://codepen.io/rachelandrew/pen/LdNPEg) in Chrome. The example has a spanning element (h2) set to column-span: all which appears very late in the content which is displayed as multicol. The multicol container is also constrained by height, so the spanner in question is in the overflow. What is the expected behavior? The Multicol specification has an example which details this scenario. The spanner is too late in the content to span and so should act as if column-span: none is specified. Example in the spec is currently Example 21: https://drafts.csswg.org/css-multicol/#column-span "In this example, the H2 element appears later in the content, and the height of the multicol container is constrained. Therefore, the H2 element appears in the overflow and there is not room to make the element spanning. As a result, the element appears as if 'column-span: none' was specified. " What went wrong? Chrome tries to cause the element to span, resulting rendering is wrong. Did this work before? N/A Does this work in other browsers? Yes Chrome version: 65.0.3325.146 Channel: n/a OS Version: OS X 10.13.3 Flash Version: Firefox does not implement column-span and so can't be tested. Edge 16 appears to be correct as to the spec.
,
Mar 15 2018
,
Mar 15 2018
The spec says: "A spanning element takes up more space than the element would take up otherwise. When space is limited, it may be impossible to find room for the spanning element. In these cases, user agents may treat the element as if none had been specified on this property." I wish this wasn't in the spec. So far I've chosen not to implement this part, since it says "user agents *may*". :) It's complicated to implement, since you'd have to attempt to lay it out as a spanner before you can determine whether it fits or not, and if it doesn't fit, you'd have to re-lay it out as regular column content instead, meaning that you'd have to make its contents part of the preceding column row, and therefore re-balance all the contents preceding the thing we though was a spanner but turned out not to be. It's pretty much impossible to implement in our current layout engine. Is this a useful feature at all?
,
Mar 15 2018
What would your suggestion be in the scenario the spec details? This may well be a better discussion to have in an issue against the spec so others can comment. The only browser implementation doing this as specced seems to be Edge.
,
Mar 15 2018
Although Edge does what the spec says that you may do (i.e. turn spanners into regular content when it doesn't fit), that approach also has some problems. See attached demo. In Edge, the text after the spanner ends up below the multicol container. The spanner fits, but there's only 1px of space available after it.
,
Mar 15 2018
I'd suggest that we don't do anything special with spanners that overflow the multicol container. I just don't find it that useful, and, as my demo shows, it doesn't guarantee sensible layout. Can't authors just refrain from doing things like this?
,
Mar 15 2018
There are many things that we might like authors to refrain from doing. However this is part of the spec that was at CR, I can't just quietly remove it. I don't know what use case put it there in the first place. Would you like to raise this as an issue against multicol, or shall I?
,
Mar 15 2018
Do it if you like. Håkon might know why this ended up in the spec. Not sure if he's on github, so attempting to CC him here.
,
Mar 16 2018
|
||||
►
Sign in to add a comment |
||||
Comment 1 by viswa.karala@chromium.org
, Mar 14 2018