CSS autoprefixer breaking flexbox in Safari

[ttches]

From create-react-app's readme @ https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

becomes

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

In practice, after running yarn build, it becomes:

.App {
  display:-ms-flexbox;
  display:flex;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-align:center;
  align-items:center
}

I believe this missing -webkit- is breaking my websites in Safari. Does anyone know how this can be prevented or if I am doing anything incorrectly? Thank you.

[cr101]

@ttches display: box; display: -webkit-box; are part of the old 2009 version of Flexbox which is no longer supported.
CRA's documentation has not been updated yet to reflect this fact.

[viankakrisna]

On which version of Safari does it break? The autoprefixer browser list looks like this

  autoprefixer({
    browsers: [
      '>1%',
      'last 4 versions',
      'Firefox ESR',
      'not ie < 9', // React doesn't support IE8 anyway
    ],
    flexbox: 'no-2009',
  }),

Maybe you used safari version that is older than 7?

[ttches]

Whoops, I was assuming 'last 4 versions' of Safari would be Safari 7-10 but I found this website after your responses and I am wrong: http://browserl.ist/?q=last+4+versions

I was testing this on Safari 8.0.1 This is not an issue with create react app as Safari 8.0 is intentionally not supported here. Thank you for your responses.

[viankakrisna]

^ I assume that too 😅 is this intentional? @gaearon @Timer

[cr101]

@viankakrisna You will be able to specify the targeted browsers once PR #2358 is merged

[skyshader]

Safari 9 comes in the last 4 versions list but still I'm getting this issue on Safari 9.1 and 10.0

[sckoh]

I can confirm that flex is breaking on safari iOS 9.3

[gaearon]

If you experience problems in Safari please file a new issue. Posting in old threads about this is not helpful because:

• It might be unrelated to the discussed change.
• You have not provided an example demonstrating the issue.
• Old issues aren’t being monitored or tracked so it’s a bit like screaming into the void. :-)

Please file a new issue, provide a specific example that breaks in Safari 9, and we can take a look. Thanks!