Autoprefixer: Safari 8 Issue

[bessudnov]

Face with trouble:
2 days ago caniuse-db was updated to version 1.0.30000666 and now using autoprefixer({
browsers: ['last 2 versions', 'Safari >= 8'],
cascade: false
})
We don't get webkit prefix: display: -webkit-flex;

We reverted it to 1.0.30000457 and everything worked okay.

Thank you, Andrew for fast replay 👍

[ai]

Sorry, I can’t reproduce it. Here is my test:

var postcss = require('postcss');
var autoprefixer = require('autoprefixer');

var css = 'a { display: flex }'

postcss([autoprefixer({ browsers: ['Safari 8'] })])
    .process(css).then(result => {
        console.log(result.css);
    });

Here is output:

a { display: -webkit-flex; display: flex }

caniuse-db version was 1.0.30000466.

[daveraynor]

I have been having the same issue as well. I updated autoprefixer, the caniuse-db, and postcss with no avail.

[ai]

@daveraynor maybe some other Autoprefixer in your build system clean prefixes? Maybe Autoprefixer in minifier?

[BarTsouri]

@ai thanks for your help.
I don't use other autoprefixer. Merely changing caniuse-db version solves it all, and I don't have any other repository relying on caniuse-db

[ai]

@BarTsouri can you reproduce error in some small clean repo?

[BarTsouri]

Yes. It will take a few hours to get to it, and then I'll send you my findings

[CedricGeerinckx]

I have this issue as well..
As you can see your example.out.css is also missing '-webkit-flex'
https://github.com/postcss/autoprefixer/blob/9cd1ca68580adb6f625ce861cdd008c751ace225/test/cases/example.out.css

[ai]

@CedricGeerinckx example test uses last 2 browsers, so it contains only Safari 9.1 and Safari 9.

[JonWallsten]

I also have this problem in our build environment. Locally it works just fine.
Same modules and version. Same source files. Only difference is a proxy server in between.

[ai]

What browsers config do you have and do you store it browserslist config?

Some other tools (like webpack) uses Autoprefixer inside. Without a browserslist config, they will use default config without Safari 8.

[JonWallsten]

This is what it looks like now

plugins.autoprefixer({ browsers: ['last 2 versions', 'safari 5', 'ie 11', 'opera 12.1', 'ios 6', 'android 4'] })

[ai]

Your browser config don't contains Safari 8. Last 2 versions is Safari 9.3 and 9.2.

[JonWallsten]

But it contains "ios 6", which support flexbox by prefix -webkit. Right?

[JonWallsten]

And it would not explain why it still works in one of the environments.

[ai]

Some other tool contains Autoprefixer and use default browsers.

Use browserslist config.

[JonWallsten]

This is it:

.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass({outputStyle:  'compact'}))
.pipe(plugins.postcss(processors))
.pipe(plugins.sourcemaps.write(cfg.styles.sourcemapRelDest, {
    sourceRoot: '../../../'
 }))
.pipe(plugins.replace(matchSourceMap, ''))
.pipe(gulp.dest(cfg.styles.processedDest));

I'll try that.

[JonWallsten]

I can confirm it works with browserslist!

[airtonix]

If you're using webpacks css-loader and then using autoprefixer separately... then you'll want to be doing this:

// ./build/config/browserslist.js

export default {
  browsers: [
    'last 2 versions',
    'iOS >= 8',
    'Safari >= 8',
  ]
};

// ./build/webpack.prod.js
import autoprefixer from 'autoprefixer';

import browserslist from './config/browserslist';

process.env.BROWSERSLIST = browserslist.browsers.join(' ,');

webpack({
...
  module: {
    loaders: [
      ...
    {
        test: /\.scss$/,
        loaders: [
            'style',
            'css',
            'postcss',
            'sass'
        ]
    },
      ...
    ]
  },
  ...
  postcss: () => [autoprefixer(browserslist), ],
 ...
});

[yves-s]

I don't get it. If I just use the postcss config as you can see below I get exactly the same result as without any autoprefixer config. There are some prefixes but display: -webkit-flex; is still missing.

...
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
...

If I then add the env process.env.BROWSERSLIST = postcssConfig.browsers.join(' ,'); my build process crashes with the error message:

ERROR in Unknown browser query `last 2 versions `
Child extract-text-webpack-plugin:
        + 1 hidden modules

My setting looks like:
postcss.config.js

module.exports = {
    browsers: [
        'last 2 versions',
        'iOS >= 8',
        'Safari >= 8',
    ]
};

webpack.config.js

...
const postcssConfig = require('./postcss.config');

process.env.BROWSERSLIST = postcssConfig.browsers.join(' ,');

module.exports = {
    ...
    module: {
        loaders: [
            ...
            {
                test: /\.scss$/,
                loader: combineLoaders([
                    {
                        loader: ExtractTextPlugin.extract('style', 'css?sourceMap'),
                        query: {
                            modules: true,
                            importLoaders: 1
                        }
                    },
                    {loader: 'postcss'},
                    {loader: 'sass'}
                ])
            },
            ...
        ]
    },
    postcss: [autoprefixer(postcssConfig)],
    ...
}

[fredlebel]

I got the same problem on iOS 9.2. To me it seemed as though an optimization in the scss compiler wasn't working on that platform.

Essentially I had two separate classes with different styles but both contained display: flex. The compiler removed that style from both classes and created a separate grouping with comma separated selectors for both classes and contained the display: flex style along with webkit versions.

On iOS 9.2 (not sure the Safari version) that grouping wasn't matching the last element in the comma separated list of selectors. It worked fine on iOS 10.2.

Worked around it by adding !important to one of the display: flex styles so the compiler wouldn't clump them together.