-ms-transform not added and * box-sizing removed

[patrick-wc]

Hi

I've just been testing this out from a tutorial I found on CSS-Tricks http://css-tricks.com/autoprefixer/ . I was wondering, I've tried both with and without the option of ie 9 support specified in the autoprefixer: { options, but for me autoprefixr is not outputing -ms-transform as it does in the linked tutorial.

Also, I tried adding a catch all box-sizing: border-box code block:

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

But this gets completely stripped out by autoprefixer...

For -ms-transform I must have messed up something in the options, but in that tutorial even if none are specified it still adds the -ms-transform variable. For box-sizing, are * selectors not supported?

Thanks

[ai]

I didn’t totally understand you :).

What CSS you write? What CSS generates Autoprefixer? And what output CSS you expect?

[ai]

BTW, there is web interactive tool to play with Autoprefixer: http://jsfiddle.net/simevidas/udyTs/show/light/

[nDmitry]

Sounds like you prefix CSS with the default browsers list: > 1%, last 2 versions, Firefox ESR, Opera 12.1. Not sure if you use grunt-autoprefixer, please show us a config if so.

[nDmitry]

Well, looks like I can close the issue.

[rifeman2007]

I have the same problem here. These properties are being stripped out.

-webkit-box-shadow: 0 0 5px 0 #e7e7e7; -moz-box-shadow: 0 0 5px 0 #e7e7e7;

Any help would be greatly appreciated.

Thanks.

[nDmitry]

@rifeman2007 what's your config?

[rifeman2007]

This is my autoprefixer config. autoprefixer: { options: { browsers: ['last 1 version'] }, dist: { files: [{ expand: true, cwd: '.tmp/styles/', src: '{,/}.css', dest: '.tmp/styles/' }] } },

Thanks.

[nDmitry]

Here the problem:

options: {
    browsers: ['last 1 version']
},

Last 1 version browsers don't need -webkit and -moz prefixes for box-shadow. https://github.com/nDmitry/grunt-autoprefixer#optionsbrowsers

[rifeman2007]

@nDmitry Thank you so much.

[sbedulin]

I have similar problem: -ms-transform is not added with config last 2 versions, ie >= 9 (or just ie >= 9, or Explorer 9)

Input:

div {
  display: flex;
  transition: transform 1s;
}

Output:

div {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition: -webkit-transform 1s;
  transition: transform 1s;
}

I used Autoprefixer Playground for testing http://jsbin.com/gufoko/quiet

[sbedulin]

Oh, nevermind :) Probably the answer is because transition isn't supported in IE9 at all