Added autoprefixer support for Safari >= 6 to use -webkit-flex

[mmwebster]

The "last 2 versions" rule for the autoprefixer was not sufficient to add "display: -webkit-flex" support for Safari v8.0.6 and Safari in iOS Simulator v8.3. All Flexbox based features were broken as a result.

[miguelcobain]

Thanks!

[mrinterweb]

I was working @mmwebster on this bug, and can verify the bug. I think relying on the last 2 versions is good, but not encompassing enough especially as new versions of browsers are released. Last 2 versions is going to be a moving target. That might be fine. Perhaps it would be better to use the default value of browserlist "> 1%, last 2 versions, Firefox ESR". According to browserlist, "All queries are based on the Can I Use support table, e. g. last 3 iOS versions might select 8.4, 9.2, 9.3 (mixed major & minor), whereas last 3 Chrome versions might select 50, 49, 48 (major only)." It is a tough call on which one to use as supporting too many browsers means more CSS bloat. Your call.

[miguelcobain]

@mrinterweb @mmwebster how about we provide a reasonable default and allow users to configure that in their ember-cli-build.js file?
Some may not need to support older browsers and may prioritize smaller file sizes, for example.

For the default, I'd like autoprefixer to support what ember supports: IE9+. Can I get your help to determine what the default value should be for autoprefixer?

[mmwebster]

That sounds great. I'll get those changes together soon.

[mmwebster]

@miguelcobain Sorry for wait, had a really busy week. I Added in the support for custom autoprefixer configs but had trouble finding specifics on Ember's browser support outside of IE9+. It just plugs in the autoprefixer option from the consuming app, so all you need is something like this in your ember-cli-build.js if you want to overwrite the default:
autoprefixer: { browsers: ['last 3 versions'] }

[miguelcobain]

The default seems to be last 2 versions (the commit) and not last 3 versions (your comment).
Just trying to clarify before merging. Thanks a lot for this!

[mmwebster]

Yea the default is last 2 versions, and if the consuming app wants to set it to last 3 versions, it can do so in its ember-cli-build.js with that snippet above. I assumed that you wanted to keep it to the last 2 versions to minimize CSS bloat. And glad to help!

[vine77]

For those curious, here's the current output of browserslist:

$ browserslist 'last 2 versions'
chrome 52
chrome 51
edge 14
edge 13
firefox 48
firefox 47
ie 11
ie 10
ie_mob 11
ie_mob 10
ios_saf 9.3
ios_saf 9.0-9.2
opera 39
opera 38
safari 9.1
safari 9

$ browserslist 'last 3 versions'
chrome 52
chrome 51
chrome 50
edge 14
edge 13
edge 12
firefox 48
firefox 47
firefox 46
ie 11
ie 10
ie 9
ie_mob 11
ie_mob 10
ios_saf 9.3
ios_saf 9.0-9.2
ios_saf 8.1-8.4
opera 39
opera 38
opera 37
safari 9.1
safari 9
safari 8

ios_saf 8.1-8.4 (1.14% current usage in U.S.) requires the -webkit- prefix for flexbox support.

[miguelcobain]

Thanks again!

[tmclouisluk]

My phone using ios safari 8.x works finally with { browsers: ['last 3 versions'] }

[tmclouisluk]

is it better to use last 3 versions instead of last 2 versions?

[mmwebster]

I'd be more in favor of explicit browser support in the autoprefixer, rather than a rule that's interpretation changes as new browser versions are released. Possibly something like ['Chrome >= 50', 'Edge >= 12', 'ff >= 46', 'ie >= 9', 'ie_mob >= 10', 'ios_saf >= 8.1', 'Opera >= 37', 'Safari >= 8'] which is the translation of ['last 3 versions'] that @vine77 listed. This way dropping and adding support is done intentionally and doesn't cause any surprises down the road.