Autoprefixer: Autoprefixer never outputs -webkit-flex

[benjigreig]

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 tested your input example in online demo and got:

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

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

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

So it is a environment problem, not inside Autoprefixer itself.

[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]

Thanks, will check that out.

[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.

[landow1218]

@ai
It seems that using browserslist key in package.json does not work. I am not good at English and I afraid that I did not get the meaning of your words.Is there something else that I need to configure?Some configurations in the package.json of my project are as follows:

  "dependencies": {
    "antd": "^3.0.2",
    "antd-mobile": "^2.0.2",
    "blueimp-md5": "^2.10.0",
    "bootstrap": "3.3.7",
    "classnames": "^2.2.5",
    "dateformat-util": "^1.0.5",
    "jquery": "^3.2.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "postcss-pxtorem": "3.3.1",
    "rc-rate": "^2.2.0",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "react-fastclick": "^3.0.2",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17",
    "react-sticky": "^6.0.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.6.2",
    "react-app-rewired": "^1.3.5"
  },
  "browserslist": [
    "> 0.3%",
    "last 7 versions",
    "Android >= 4", 
    "Firefox >= 20", 
    "iOS >= 8"
  ]

// input
.courseHeader{
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  border-bottom: 0.08rem solid rgb(241, 241, 241);
  height: 0.88rem;
  line-height: 0.88rem;
  color: rgb(12, 121, 200);
}

// output (can not work well in ios8.1.1)
.courseHeader___3AZO1 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 0.3rem;
    border-bottom: 0.08rem solid rgb(241, 241, 241);
    height: 0.88rem;
    line-height: 0.88rem;
    color: rgb(12, 121, 200);
}

[ai]

@landow1218 what Autoprefixer version do you use? Show me how do you use it.

[landow1218]

@ai The autoprefixer version is 7.1.6. My project built with a tool called create-react-app. I use a file to overwirte the default configuration of the initial project. Then I change some text in the file. Just as follows:

             // default text
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            // my text
              autoprefixer({
                browsers: [
                  "> 0.3%",
                  "last 7 versions",
                 "Android >= 4", 
                 "Firefox >= 20", 
                 "iOS >= 8"
                ],
               flexbox: true,
              }),

I find it does not work well. Then I use browserslist key in package.json to configure and I also can not get What I am expected.

[ai]

@lahmatiy Update Autoprefixer to the latest version.