Column-fill: auto doesn't fill as expected, content ends up in one column
Categories
(Core :: Layout: Columns, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox69 | --- | fixed |
People
(Reporter: bz, Assigned: TYLin)
References
Details
Attachments
(4 files)
SCreenshot of a webkit browser and how it renders the same page (with prefixed properties)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:54.0) Gecko/20100101 Firefox/54.0 Build ID: 20170319084208 Steps to reproduce: http://codepen.io/anon/pen/GWQWGO Actual results: All content ended up in one column. Expected results: "auto Is a keyword indicating that columns are filled sequentially." Columns should've been filled sequentially.
|
Reporter | |
Comment 1•7 years ago
|
||
|
|
Reporter | |
Comment 2•7 years ago
|
||
|
|
Reporter | |
Comment 3•7 years ago
|
||
I may have misinterpreted what this property does, and it may be that the WebKit screenshot is incorrect. After re-reading the spec, it seems that the first column is filled as much as possible in "auto" mode - and if you include a few more blocks of lorem ipsum (to get past the 500px height limit), Firefox begins to start using the second column. I don't understand why then, Chrome uses the second column in auto mode if there is still height left. Am I still misunderstanding?
I've faced this issue too. Try this - https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-fill column-fill: auto leads to the first newspaper1 article to be rendered in one single column instead of being split into multiple columns as it happens in Chrome & Safari & Firefox v51.
|
||
Comment 5•7 years ago
|
||
According to the specification found at https://www.w3.org/TR/css3-multicol/ the standard behavior for column-fill is "balanced" which splits up the content to fill all available columns equally. "auto" makes column-fill to put content into all the available columns sequentially which means it only starts filling the next column if the first one has been completely filled. Also note that this property will only be consulted if the length of columns has been constrained. lol768s picture 2 shows the intended behavior and Kannans testcase also does. If you want you can file a bug with Webkit and Chrome but please be aware that Multi Column Layouts is still a candidate recommendation and can be subject to changes. Have a nice day, Jan
David, as you reviewed the code about the implementation of column-fill, could you give your thoughts here, please.
So the issue here is really what the *height* of the element should be. If you give it, say, "height: 6.5em" (and maybe also a background), you'll see content flowing into the second column (although with more content in the first column than the second). I'm not sure what the spec says about how 'auto' height should behave on elements with 'column-fill: auto'. Should they get the height that fits all the content into one column, or the height that allows the content to balance? (Relevant specs are probably both css-multicol and css-sizing.) (In reply to Jan Sonntag from comment #5) > If you want you can file a bug with Webkit and Chrome but please be aware > that Multi Column Layouts is still a candidate recommendation and can be > subject to changes. I think this comment is inappropriately dismissive of the reporter's real concern. Web features should be interoperable, and the "Candidate Recommendation" status of the specification is not relevant to that concern. I also don't think anybody has properly substantiated which behavior is correct according to current specifications. I might have time to look at the spec more closely later, although if somebody else does it first, that would be great.
Two more thoughts: 1. Making 'auto' height of a multicol do balancing is probably the more expected behavior from a layout perspective 2. However, another set of expectations of 'column-fill: auto' is related to performance. 'column-fill: auto' avoids balancing, which is one of the things (probably the main thing) that can be really slow about multicolumn layout. So making 'height: auto; column-fill: auto' do balancing when determining the height violates the *speed* expectation of 'column-fill: auto'.
As far as specs go, I don't think they say. https://drafts.csswg.org/css-multicol/ has *examples* (in the section on 'column-fill') that suggest that 'height: auto' calculations with 'column-fill: auto' should do balancing to determine the auto height. But it doesn't have any normative text. https://drafts.csswg.org/css-sizing-3/ doesn't appear to cover the subject. Nor does https://drafts.csswg.org/css-sizing/ (early draft), which only seems to cover the inline-size (width, for English) of multicolumn elements and not the block-size (height, for English). So I think a spec issue should be filed.
|
||
Comment 12•6 years ago
|
||
Recent updates of Editor draft (july 2018) and Working draft (may 2018) now clearly suggest that Firefox handles 'column-fill: auto; height: auto;' correctly: Example 27: https://drafts.csswg.org/css-multicol/#example-d151413b Example 27: https://www.w3.org/TR/css-multicol-1/#example-d151413b - - - - - http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column.html
|
Assignee | |
Comment 13•5 years ago
|
||
(In reply to David Baron :dbaron: 🏴 ⌚UTC-7 (if account gets disabled due to email bounces, ask a bugzilla admin to reenable it) from comment #9)
- Making 'auto' height of a multicol do balancing is probably the more
expected behavior from a layout perspective
CSS Working Group decided to update the spec that column-fill: auto balances an unconstrained container. https://github.com/w3c/csswg-drafts/issues/3224#issuecomment-468089503
However, for the reporter's test case in comment 0, there's max-height: 500px;. So it's still considered as a "constrained" container. Firefox still behaves as expected.
|
|
||
Comment 14•5 years ago
|
||
with 'max-height: 200px':
http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column.html
In this test, the line box height should be exactly 20px. So, content should fill 10 lines in the first column before starting to fill the 2nd column... assuming there is enough content (text) to fill 10 lines. Reducing width of viewport can do that.
with 'max-height: 100px':
http://www.gtalbot.org/BugzillaSection/Bug1348839-column-fill-auto-content-1column-002.html
In this 002 test, the line box height should also be exactly 20px. So, content should fill 5 lines in the first column before starting to fill the 2nd column.
I think Firefox 60.6.0 ESR renders those tests correctly, precisely and as expected.
Not so in my opinion with Chromium 72.0.3626.122, Chromium 75.0.3738.0 and Epiphany 3.31.90-8061c1929 (WebKitGTK 2.24.0).
I tried those 2 tests with a 2 days old nightly build of Firefox and the rendering was incorrect. There is a problem with today's nightly build, so I could not check.
|
|
||
Comment 15•5 years ago
|
||
I tried those 2 tests with a 2 days old nightly build of Firefox and
the rendering was incorrect. There is a problem with today's nightly build,
so I could not check.
I had a corrupted profile.
I just tried those 2 tests with Firefox 68.0a1 buildID=20190322164604 and I think Firefox 68.0a1 buildID=20190322164604 renders those 2 tests correctly, precisely and as expected.
|
|
Assignee | |
Comment 16•5 years ago
|
||
A reminder to myself to look at the test cases because they are not rendered as expected if layout.css.column-span.enabled=true.
|
|
||
Comment 17•5 years ago
|
||
I have been developing and working on tests referencing this bug report:
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-001.html
(Ahem font required; available from http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ )
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-002.html
(Ahem font required; available from http://www.w3.org/Style/CSS/Test/Fonts/Ahem/ )
Reference file:
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/reference/ref-filled-green-100px-square.xht
and other tests that I am developing.
Next month, in April 2019 (because I am too busy these days), I expect
a) to use those tests to file a bug report over at chromium
project ( bugs.chromium.org/p/chromium/issues/ ) and then
b) to github-submit them to web-platform-tests repository.
|
|
Assignee | |
Comment 18•5 years ago
|
||
Gérard, if you have a chance to add the two tests in comment 17 to web-platfrom-tests and Firefox is having any issue rendering them at that time, please file a new bug. Thanks! (Firefox Nightly 2019-05-17 renders the two tests correctly with or without layout.css.column-span.enabled)
Also, when I wrote comment 16, the reporter's test case (from comment 7) rendered incorrectly with layout.css.column-span.enabled=true. Luckily, bug 1411422 fixed it. I'm going to add a reftest to ensure we won't regress it.
|
|
Assignee | |
Comment 19•5 years ago
|
||
This reftest renders correctly since bug 1411422 is landed.
|
|
||
Comment 20•5 years ago
|
||
Gérard, if you have a chance to add the two tests
in comment 17 to web-platfrom-tests
I forgot about this and about a) and b) in comment 17. I have been busy or very busy in the last 2 months. But this time, I wrote down comment 17 in my to-do-list. I will eventually get to it.
|
|
||
Comment 21•5 years ago
|
||
The correspondent bug report (with almost identical test) over at chromium project was:
Issue 223072: CSS Multi column: Max-height is ignored
https://bugs.chromium.org/p/chromium/issues/detail?id=223072
and it was resolved 3½ years ago. I will eventually file another bug report over there.
|
||
Updated•5 years ago
|
|
||
Comment 22•5 years ago
|
||
Pushed by aethanyc@gmail.com: https://hg.mozilla.org/integration/autoland/rev/156a12d60812 Add a web platform test which tests max-height imposes constraint on column boxes' height. r=dbaron
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16928 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
|
||
Comment 25•5 years ago
|
||
| bugherder | ||
Upstream PR merged
|
|
||
Comment 27•5 years ago
|
||
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-001.html
http://www.gtalbot.org/BrowserBugsSection/CSS3Multi-Columns/columnfill-auto-max-height-002.html
b) to github-submit them to web-platform-tests repository.
Done:
https://github.com/web-platform-tests/wpt/pull/17018/
Now, it's a matter of waiting for review and approval.
|
|
||
Comment 28•5 years ago
|
||
Both tests have been approved.
a) to use those tests to file a bug report over at chromium
project ( bugs.chromium.org/p/chromium/issues/ )
Done:
Issue 967329: Non-auto max-height doesn't prevent forcing of column balancing
https://bugs.chromium.org/p/chromium/issues/detail?id=967329
|
|
Assignee | |
Comment 29•5 years ago
|
||
Gérard, thank you for adding these tests.
Description
•