Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS autoprefixer breaking flexbox in Safari #2450

Closed
ttches opened this issue Jun 2, 2017 · 8 comments
Closed

CSS autoprefixer breaking flexbox in Safari #2450

ttches opened this issue Jun 2, 2017 · 8 comments

Comments

@ttches
Copy link

ttches commented Jun 2, 2017

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
Copy link
Contributor

cr101 commented Jun 2, 2017

@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
Copy link
Contributor

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
Copy link
Author

ttches commented Jun 2, 2017

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.

@ttches ttches closed this as completed Jun 2, 2017
@viankakrisna
Copy link
Contributor

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

@cr101
Copy link
Contributor

cr101 commented Jun 2, 2017

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

@skyshader
Copy link

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

@sckoh
Copy link

sckoh commented Aug 16, 2017

I can confirm that flex is breaking on safari iOS 9.3

@gaearon
Copy link
Contributor

gaearon commented Aug 16, 2017

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!

@facebook facebook locked and limited conversation to collaborators Aug 16, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants