We do have to expand flex values
#56
Conversation
|
I've been out of the flexbugs game for a long time, I'll double-check this on IE 10 tomorrow and get back to you. |
|
I don't think expanding the shorthand is the right approach. If I understand issue #26 correctly, the idea is to set explicitly the value of /* IGNORE (flex-shrink already specified) */
flex: 1 1;
flex: 1 1 100%;
flex: 100% 1 1;
/* FIX */
flex: 1; /* => flex: 1 1 0%; */
flex: 1 10%; /* => flex: 1 1 10%; */
flex: 2em; /* => flex: 0 1 2em; */ |
There was a problem hiding this comment.
I think the only way for this plugin to confidently move forward is to add e2e tests (e.g. Sauce Labs) for IE 10/11 and Safari 9/10 to double-check everything. I'll try to integrate those in another PR because I can't keep flexbugs in my head.
Also, I can't remember why I posted that comment you cited and what I meant by it. 😕
specs/bug6Spec.js
Outdated
| @@ -3,7 +3,7 @@ var test = require('./test'); | |||
| describe('bug 6', function() { | |||
| it('Set flex-shrink to 1 by default', function(done) { | |||
| var input = 'div{flex: 1;}'; | |||
| var output = 'div{flex: 1 1;}'; | |||
| var output = 'div{flex-grow: 1;flex-shrink: 1;}'; | |||
There was a problem hiding this comment.
I think flex: 1 should become flex: 1 1 0% (or flex: 1 1 0, I can't remember if and why unitless is better) because flex: 1 also sets flex-basis, so this fix isn't correct.
There was a problem hiding this comment.
IE11 do not understand unitless :(
If the is ‘0’, it must be specified with a unit (like ‘0px’) to avoid ambiguity; unitless zero will either be interpreted as as one of the flexibilities, or is a syntax error.
This is no longer true in the spec, but IE 10-11 still treat it as true. If you use the declaration flex: 1 0 0 in one of these browsers, it will be an error and the entire rule (including all the flexibility properties) will be ignored
specs/bug6Spec.js
Outdated
| @@ -17,12 +17,17 @@ describe('bug 6', function() { | |||
| }); | |||
| it('when flex-shrink is set explicitly to zero', function(done) { | |||
| var css = 'div{flex: 1 0 0%;}'; | |||
| var output = 'div{flex: 1 0;}'; | |||
| var output = 'div{flex-grow: 1;flex-shrink: 0;flex-basis: 0;}'; | |||
There was a problem hiding this comment.
Like I said, I can't remember why this should be expanded, same applies to the rest of your changes…
Issue: #26