Autoprefixer never outputs -webkit-flex

We’ve been conducting a lengthy tests to narrow down an issue which is having an effect on iOS 7-8 users predominantly in one of our new projects. It has to do with display: flex. What’s missing in action is webkit prefixes for post 2009 flexbox.

The following browser versions require the -webkit vendor prefix for flexbox post 2009 to work

iOS 7.1-8.4 Chrome v21-28 Safari 6.1-8

I’ve been pulling my hair out over the weekend and today trying to isolate the issue and this is where I’ve come to.

Input CSS

.flex-test {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    width: 100%;
}

.flex-text .child {
    flex: 1;
}

.flex-text .child.noflex {
    flex: none;
}

Autoprefixer configuration

autoprefixer({
	browsers: ['> 1%', 'last 3 versions', 'Firefox >= 20', 'iOS >=7']
})

Output with above config (including 2009 flexbox model)

.flex-test {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap-reverse;
    flex-wrap:wrap-reverse;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:100%
}

.flex-text .child {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1
}

.flex-text .child.noflex {
    -webkit-box-flex:0;
    -ms-flex:none;
    flex:none
}

Output with above config & “no-2009” flag

.flex-test {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap-reverse;
    flex-wrap:wrap-reverse;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:100%
}

.flex-text .child {
    -ms-flex:1;
    flex:1
}

.flex-text .child.noflex {
    -ms-flex:none;
    flex:none
}

What we’re expecting (with “no-2009” flag)

.flex-test {
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -ms-flex-wrap:wrap-reverse;
    -webkit-flex-wrap:wrap-reverse;
    flex-wrap:wrap-reverse;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content:space-between;
    width:100%
}

.flex-text .child {
    -ms-flex:1;
    -webkit-flex:1;
    flex:1
}

.flex-text .child.noflex {
    -ms-flex:none;
    -webkit-flex:none;
    flex:none
}

Any help resolving this would be greatly appreciated.

[ai]

I think problem is related with bad practice of setting browsers via option. Please use browserslist config or browserslist key in package.json as we recommend — at result you will have same browsers between all frontend tools.

[benjigreig]

Yep totally the configuration. So our project made use of a package called gulp-autoprefixer which was a carry-over from another project. Ditched that and replaced it with plain autoprefixer + gulp-postcss ala the instructions in the readme. Moved the browsers configuration over to the package.json. Bingo all works. Thanks @ai, much appreciated.