transition with -webkit- transform in shorthand rule

Question

I have grunt with postcss running autoprefixer, and the code:

transition: transform .3s, color .3s;

... is outputting:

transition: color .3s, -webkit-transform .3s;
transition: transform .3s, color .3s;
transition: transform .3s, color .3s, -webkit-transform .3s;

But shouldn't it be outputting this?

-webkit-transition: -webkit-transform .3s, color .3s;
transition: transform .3s, color .3s;

My postcss settings are:

postcss: {
    options: {
        map: {
            inline: false, // save all sourcemaps as separate files...
            annotation: '../css/' // ...to the specified directory
        },

        processors: [
            require('autoprefixer')({browsers: 'last 2 versions'}), // add vendor prefixes
        ]
    },
    dist: {
        src: '../css/*.css'
    }
}

I have no idea if I'm doing anything wrong, if it's outputting incorrectly, or if it's actually correct.

Thanks

score 0 · Answer 1 · answered Jan 21 '16 at 08:33

You have write the correct css, its is not you fault, you can also check you css on their official page, and according to your browser selection setting {browsers: 'last 2 versions'} you don't need any transition prefix for last 2 webkit versions, generated css is correct.

transition with -webkit- transform in shorthand rule

1 Answers1