Transform for older versions of IE

Baffled as to why some prefixes for transform aren’t being added. Not sure if ticket belongs in gulp-autoprefixer or here, but here goes:

My gulp task:

gulp.task("sass", function () {
    gulp.src(["./public/styles/styles.scss", "./public/styles/qubase/qubase.scss"])
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(sassGlob())
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ["last 50 versions", "ie >= 9"],
        cascade: false
    }))
    .pipe(cssnano())
    .pipe(rename({
        suffix: ".min"
    }))
    .pipe(sourcemaps.write("../maps"))
    .pipe(gulp.dest("./public/build"))
    .pipe(livereload());
});

My scss:

...
&-center{
    display: flex;
    transform: translateX(-50%);
}

Output:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

So flexbox is fine, but where’s the -ms- and -moz- prefixes for transform?

The thing that really stumps me is it works just fine in the demo: http://autoprefixer.github.io/

Any ideas?

[ai]

@clhenrick I think so

[ai]

You have this issue because you ignore Autoprefixer install instructions and use gulp-autoprefixer and gulp-cssnano instead of gulp-postcss with autoprefixer and cssnano plugins:

1. If you will gulp-postcss then autoprefixer and cssnano will use same AST and will work much faster.
2. cssnano has built-in Autoprefixer. In one PostCSS chain cssnano could detect that you use own Autoprefixer. But in this case cssnano didn’t see that you use other PostCSS in gulp-autoprefixer.