-webkit prefix missing after css minification

[that1guy]

All my -webkit prefixes are getting stripped during the minification process. This causes all much of my application to behave badly on Safari & iOS device. I've spent a lot of time trying to resolve this one, but I'm stumped.

Here's an example of my raw SASS

.layout {
    @include position(absolute, $headerHeight null 0 null);

    overflow: hidden;

    background-color: $gray;

    @include fill-parent();
    @include row();

    //Offcanvas menu open
    &.offcanvasOpen
    {

        aside.offcanvas
        {
            transform: translateX(0%) translateZ(0);

            opacity: 1;
        }
        main
        {

            transform: translateX($offcanvasWidth);

            @include media($mobile) {
                transform: translateX(90%) translateZ(0);
            }
        }

        .menu-cover {
            opacity:1;
            display:block;
        }
    }

    &.offcanvasOpen.offcanvasPanelOpen {
        main
        {
            transform: translateX(100%) translateZ(0);
        }
    }

    .menu-cover {
        @include absoluteFull();
        z-index:9999999;
        opacity:0;
        display:none;
        cursor:pointer;
    }

}//END .offcanvasOpen

Here is the CSS that my compass SASS preprocessor produces

/* line 2656, ../../app/styles/main.scss */
.layout.offcanvasOpen aside.offcanvas {
  -webkit-transform: translateX(0%) translateZ(0);
          transform: translateX(0%) translateZ(0);
  opacity: 1;
}
/* line 2662, ../../app/styles/main.scss */
.layout.offcanvasOpen main {
  -webkit-transform: translateX(340px);
          transform: translateX(340px);
}
@media screen and (max-width: 480px) {
  /* line 2662, ../../app/styles/main.scss */
  .layout.offcanvasOpen main {
    -webkit-transform: translateX(90%) translateZ(0);
            transform: translateX(90%) translateZ(0);
  }
}
/* line 2672, ../../app/styles/main.scss */
.layout.offcanvasOpen .menu-cover {
  opacity: 1;
  display: block;
}
/* line 2679, ../../app/styles/main.scss */
.layout.offcanvasOpen.offcanvasPanelOpen main {
  -webkit-transform: translateX(100%) translateZ(0);
          transform: translateX(100%) translateZ(0);
}

Here is what I see in browsers css styles inspector before minification.. Looks great!

When I do a build for my staging environment using grunt, thus running cssmin, I notice that -webkit is stripped from all my css:

  grunt.registerTask('build-staging', [
    'clean:staging',
    'ngconstant:staging',
    'useminPrepareStaging',
    'concurrent:staging',
    'autoprefixer:staging',
    'concat:generated',
    'ngtemplates:staging',
    'ngAnnotate:staging',
    'copy:staging',
    'cdnify:staging',
    'cssmin:generated',
    'uglify:generated',
    'filerev:staging',
    'useminStaging',
    'htmlmin:staging'
  ]);

here's what I see in the browser's css styles inspector after minification...

How do I resolve this?

thanks!

[sindresorhus]

From the top of the readme:

Issues with the output should be reported on the clean-css issue tracker.

[alana314]

I was able to fix this in my install with:

autoprefixer({
            browsers: ['last 5 versions'],
            cascade: false
        }

It was set to last 2 versions before