Material-ui not working in Safari only with Gulp-compass

Question

I am using material-ui lib for react components, the scss port material-ui-sass

See the following screenshot on Safari (Both mobile and desktop). They are working in Chrome, Firefox, even Opera, but just not in Safari.

gulp.task('compass', function() {
  return gulp.src('app/styles/**/*.scss')
    .pipe($.plumber())
    .pipe($.compass({
      css: '.tmp/styles',
      sass: 'app/styles'
    }));
});

Does anyone have a hint on where the error might be? I thought it was the autoprefixer not working, but the prefixes for webkit are added. Very confused at the moment. Any help would be appreciated. The core issue seems to be not running autoprefixer after .pipe($.compass({ css: '.tmp/styles', sass: 'app/styles' }));

I tried without success with following code:

gulp.task('compass', function() {
  return gulp.src('app/styles/**/*.scss')
    .pipe($.plumber())
    .pipe($.compass({
      css: '.tmp/styles',
      sass: 'app/styles'
    }))
    .pipe($.autoprefixer({
      browsers: ['last 5 versions']
    }));
});

Answer 1

Resolved. The issue was with not having autoprefixer ran with gulp.dest. A silly beginner gulp mistake.