Hack for unitless 0 basis in IE10/IE11 shorthand flex #749

Merged
merged 1 commit into from Dec 12, 2016

Projects

None yet

2 participants

@rzhw
Contributor
rzhw commented Nov 24, 2016

Demo: http://codepen.io/anon/pen/rWwaOZ
Expected result (Chrome 55): Screenshot
Expected result (IE 11): Screenshot

Overview:

This is a workaround for this IE10/11 bug.

Only applies when there are three components in the flex property.

This is because when there's one or two components only, it's ambiguous whether whether the first component being a unitless 0 is intended to be flex-grow or flex-basis. Browsers resolve this by treating such cases as a flex-grow of 0.

Note with IE11 that even though it understands the unprefixed flex property, we don't apply the hack there. Instead we let it treat the unprefixed version as invalid, and fall back onto -ms-flex.

Finally, although some CSS minifiers may revert the 0px to 0, we don't use 0% instead, even though many of these won't touch 0%. See this Chromium issue for why this is the case.

References:

Also adds Google Inc. to the list of copyright authors.

@rzhw rzhw changed the title from Add hack for unitless 0 basis in IE10/IE11 shorthand flex to Hack for unitless 0 basis in IE10/IE11 shorthand flex Nov 24, 2016
@ai
Member
ai commented Nov 24, 2016

Good idea.

But why you add Google to LICENSE?

@ai
Member
ai commented Nov 24, 2016

I worry because Autoprefixer have many contributors. And them are mentioned only in GitHub and ChangeLog, but not in LICENSE. So we need some policy for mentioned in LICENSE.

I never read aby good research about it. My non-professional way is to mention maintainers and developers who wrote a big part of project.

But because my thoughts is not based on good research, I am open for your opinion.

@ai
Member
ai commented Nov 24, 2016

I made some research: Rails, React and Sass license files mention only one person/organization.

Wikipedia says, that name in LICENSE is not a authors, but a “copyright holders” (I understand it as person who you need to contact about this code).

@rzhw
Contributor
rzhw commented Nov 24, 2016

I'll get back to you with an answer as soon as I can. Thanks!

@rzhw
Contributor
rzhw commented Dec 2, 2016 edited

One approach I've seen is to use an AUTHORS file to list copyright authors, separate from contributors:

You could try this as a starting point:

git log --format='%aN <%aE>' | sort -u | sed -e 's/<\(.\+\?\)@users.noreply.github.com>/<https:\/\/github.com\/\1>/g'
@ai
Member
ai commented Dec 2, 2016

@rzhw sure, we could add AUTHORS with a link to GitHub? (But do we need them if main access to repo is by GitHub? :D )

Send a separated AUTHOR PR and remove LICENSE changes from this PR.

@ai
Member
ai commented Dec 7, 2016

@rzhw ping =^_^=

@rzhw
Contributor
rzhw commented Dec 7, 2016

@ai On it, will be sending a PR today 👍

@ai
Member
ai commented Dec 7, 2016

OK, not please update this PR

@rzhw rzhw Add hack for unitless 0 basis in IE10/IE11 shorthand flex
Only applies when there are three components in the flex property.

This is because when there's one or two components only, it's
ambiguous whether whether the first component being a unitless 0 is
intended to be flex-grow or flex-basis. Browsers resolve this by
treating such cases as a flex-grow of 0.

Note with IE11 that even though it understands the unprefixed flex
property, we don't apply the hack there. Instead we let it treat the
unprefixed version as invalid, and fall back onto -ms-flex.

Finally, although some CSS minifiers may revert the 0px to 0, we
don't use 0% instead, even though many of these won't touch 0%.
See https://bugs.chromium.org/p/chromium/issues/detail?id=495306
for why this is the case.

Workaround for:
https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored

References:
https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flexibility
https://www.w3.org/TR/css-flexbox-1/#flex-property
https://www.w3.org/TR/2016/CR-css-values-3-20160929/#component-combinators
86c1479
@rzhw
Contributor
rzhw commented Dec 7, 2016

Done :)

@ai ai merged commit 8a3dfb8 into postcss:master Dec 12, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment