Repository navigation
CSS autoprefixer breaking flexbox in Safari #2450
Description
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.
Activity
cr101 commentedon 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 commentedon Jun 2, 2017
On which version of Safari does it break? The autoprefixer browser list looks like this
Maybe you used safari version that is older than 7?
ttches commentedon 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.
viankakrisna commentedon Jun 2, 2017
^ I assume that too 😅 is this intentional? @gaearon @Timer
cr101 commentedon Jun 2, 2017
@viankakrisna You will be able to specify the targeted browsers once PR #2358 is merged
skyshader commentedon Aug 3, 2017
Safari 9 comes in the last 4 versions list but still I'm getting this issue on Safari 9.1 and 10.0
sckoh commentedon Aug 16, 2017
I can confirm that flex is breaking on safari iOS 9.3
gaearon commentedon Aug 16, 2017
If you experience problems in Safari please file a new issue. Posting in old threads about this is not helpful because:
Please file a new issue, provide a specific example that breaks in Safari 9, and we can take a look. Thanks!