Autoprefixer is removing 'display: -webkit-box'

[stephencarr]

My config:

autoprefixer: {
            options: {
                browsers: ['> 1%', 'ie >= 7'],
                diff: true
            },
            single_file: {
                src: './source.css'
            }
        }

My source CSS

div {
        display: block;
        display: -webkit-box;
        line-height: 1.2;
        text-overflow: ellipsis;
        height: 12px; 
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

When autoprefixer parses this it sweeps out 'display: -webkit-box;'. Playing with the interactive tool (http://jsbin.com/gufoko/quiet) this does not happen. Where am I going wrong?

[ai]

What is input CSS?

In you output example prefixed display: -webkit-box has no unprefixed display: flex. If Autoprefixer finds prefix without unprefixed version, it decide that is browser-specific hack and didn’t remove outdated prefix (because it is look like that you want to hack some bug in old version like -webkit-transform: translate3d(0, 0, 0)).

[stephencarr]

I am trying to implement multiple line text truncation: http://css-tricks.com/line-clampin/

I understand this is a bit of a hack, but just wondered why the interactive tool works but my local grunt job does not.

[ai]

Show me input CSS :).

But online demo doesn’t remove this kind of hacks too.

[stephencarr]

Input CSS:

div {
        display: block;
        display: -webkit-box;
        line-height: 1.2;
        text-overflow: ellipsis;
        height: 12px; 
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

[ai]

I found a problem :).

Interactive demo uses latest 5.0-release from master (it is my mistake, I forget to create branch in Rails plugin which is used by demo to take standalone build). Autoprefixer 5.0 uses Browserslist with more correct global usage statistics calculation.

So > 1% in demo is little bit different, that > 1% in current Autoprefixer in Grunt plugin.

[stephencarr]

Is there any way to fix this in the browser settings for the Grunt plugin?

[ai]

Just wait few days. Tomorrow I will release 5.0 and after few days @nDmitry will release new grunt-autoprefixer with Autoprefixer 5.0.

[ai]

But wait a second… Why old Autoprefixer even remove this hack :-/.

[ai]

Autoprefixer 5.0 do not remove this property only because it still think, that prefix is still actually. It will remove this prefix in future too :-(.

[ai]

I create issue in Autoprefixer repo: https://github.com/postcss/autoprefixer/issues/385

[stephencarr]

Great. Thanks for your help!

[maruthi1255]

I am using gulp-autoprefixer@3.1.1, still I can see this issue for -webkit-box-orient: vertical;. Could any one update the version in which this issue is fixed for gulp-autoprefixer.

[ai]

@maruthi1255 if you need -webkit-box-orient add old Safari to browsers option.