Skip to content

Autoprefixer never outputs -webkit-flex #766

New issue
New issue
Closed
Closed
Autoprefixer never outputs -webkit-flex#766
@benjigreig

Description

@benjigreig
benjigreig
opened on Jan 9, 2017 · edited by 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.

Activity

ai

ai commented on Jan 9, 2017

@ai
ai
on Jan 9, 2017
Member

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
closed this as completedon Jan 9, 2017
ai

ai commented on Jan 9, 2017

@ai
ai
on Jan 9, 2017
Member

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

benjigreig commented on Jan 9, 2017

@benjigreig
benjigreig
on Jan 9, 2017
Author

Thanks, will check that out.

benjigreig

benjigreig commented on Jan 9, 2017

@benjigreig
benjigreig
on Jan 9, 2017
Author

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.

paranoidjk
mentioned this on Apr 26, 2017
and218

and218 commented on Apr 18, 2018

@and218
and218
on Apr 18, 2018 · edited by and218

@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

ai commented on Apr 18, 2018

@ai
ai
on Apr 18, 2018
Member

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

and218

and218 commented on Apr 23, 2018

@and218
and218
on Apr 23, 2018

@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

ai commented on Apr 23, 2018

@ai
ai
on Apr 23, 2018
Member

@lahmatiy Update Autoprefixer to the latest version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ai@benjigreig@and218

        Issue actions
          Autoprefixer never outputs -webkit-flex · Issue #766 · postcss/autoprefixer