Permalink
Browse files

Add hack for unitless 0 basis in IE10/IE11 shorthand flex (#749)

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
  • Loading branch information...
1 parent df68915 commit 8a3dfb8ba6b89219a751f2884b5ccfa79a1fe9a9 @rzhw rzhw committed with ai Dec 12, 2016
Showing with 8 additions and 1 deletion.
  1. +1 −0 AUTHORS
  2. +6 −0 lib/hacks/flex.coffee
  3. +1 −1 test/cases/flexbox.out.css
View
@@ -48,6 +48,7 @@ Erik Sundahl <esundahl@gmail.com>
Eugene Datsky <eugene@datsky.ru>
Evilebot Tnawi <sheo13666q@gmail.com>
Forrest York <https://github.com/badisa>
+Google Inc.
Gregory Eremin <magnolia_fan@me.com>
GU Yiling <justice360@gmail.com>
Hallvord R. M. Steen <hallvord@hallvord.com>
@@ -23,12 +23,18 @@ class Flex extends Declaration
'flex'
# Spec 2009 supports only first argument
+ # Spec 2012 disallows unitless basis
set: (decl, prefix) ->
spec = flexSpec(prefix)[0]
if spec == 2009
decl.value = list.space(decl.value)[0]
decl.value = Flex.oldValues[decl.value] || decl.value
super(decl, prefix)
+ else if spec == 2012
+ components = list.space(decl.value)
+ if components.length == 3 and components[2] == '0'
+ decl.value = components[..1].concat('0px').join(' ')
+ super(decl, prefix)
else
super
@@ -212,6 +212,6 @@ a {
-webkit-box-flex: -webkit-calc(1em + 1px);
-webkit-flex: -webkit-calc(1em + 1px) 0 0;
-moz-box-flex: calc(1em + 1px);
- -ms-flex: calc(1em + 1px) 0 0;
+ -ms-flex: calc(1em + 1px) 0 0px;
flex: calc(1em + 1px) 0 0;
}

0 comments on commit 8a3dfb8

Please sign in to comment.