Web-bugs: www.w3.org - layout is messed up

[simevidas]

URL: https://www.w3.org/blog/CSS/2016/10/13/minutes-telecon-302/
Browser / Version: Firefox 52.0
Operating System: Windows 10
Problem type: Layout is messed up

Steps to Reproduce
1) Navigate to: https://www.w3.org/blog/CSS/2016/10/13/minutes-telecon-302/

Expected Behavior:
The page header, navigation, and footer should span all CSS columns (i.e. column-span: all).

Actual Behavior:
They don’t, because Firefox doesn’t support column-span.

_From webcompat.com with ❤️_

[jensimmons]

This isn't causing the bug, but it also looks like the order of prefixed and unprefixed properties is reverse of what it should be.

Best practices call for putting the in prefixed version last in the cascade, so that it's used once it's supported. And this CSS is written with the unprefixed property written first.

It is:
box-sizing: border-box;
-moz-box-sizing: border-box;

I'd recommend:
-moz-box-sizing: border-box;
box-sizing: border-box;

[miketaylr]

I suspect @simevidas is correct here. We're hitting some unprefixed column CSS and haven't implemented column-span: https://bugzilla.mozilla.org/show_bug.cgi?id=616436

Intent to ship unprefixed: https://groups.google.com/forum/#!topic/mozilla.dev.platform/EammrHjrCpw

@karlcow can you dig in a little deeper?

[jensimmons]

@simevidas is correct. If you use muticolumn in this way, it requires that column span also work. A quick fix would be to wrap all the column code in an @supports statement that tests for column-span support, so that it only runs if column-span works. Another fix would be to restructure the layout so it isn't so reliant on this combination of properties.

Meanwhile, I would recommend restructuring the order of the prefixes. And the use of autoprefixer so that all prefixes are used, and not a subset. (In which case this bug would have come up sooner.) Of course, these things are optional.

[karlcow]

@bert-github As the owner of the page, do you think you could help us there or do you want to keep it as-is (for the purpose it will work one day)? Thanks.

I will ping Bert on IRC too.

[karlcow]

Someone told me in my earbud that Bert is busy giving some talks in Brazil now. :) It will take a couple of days.

[bert-github]

Indeed, the style assumed that, if 'columns' worked, then 'column-span'
would work, too. I now added an '@supports' for 'column-span'.

Bert

Bert Bos ( W 3 C ) http://www.w3.org/
http://www.w3.org/people/bos W3C/ERCIM
[email protected] 2004 Rt des Lucioles / BP 93
[phone] 06902 Sophia Antipolis Cedex, France

[karlcow]

Thanks @bert-github