Why doesn't Safari work correctly with flexbox?

Question

css

I use for the ribbon, the text in which should be centered flexbox.
Everywhere everything is fine, except for Safari - there the text is pressed against the top border.
jsbin.com/pudiyajipu/edit?html ,css,output
Any ideas?

Answer 1

I do this to support old browsers and jokes with webkit and others:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

This is all instead

flex-wrap: wrap;
display: flex;
justify-content: space-between;

Answer 2

Good afternoon.
I also encountered incorrect display of flex-box in Safari (more precisely, on the IPAD Mini device)
The developer console in Chrome displays everything exactly, there is just an emulation of this device. On the device itself, everything goes.
Registered display: -webkit
-box;
-webkit-align-items: center;
-webkit-justify-content: space-between;
For some reason, this began to conflict, and everything works again in Chrome and other browsers. I remove display: -webkit-box; - everything in Chrome becomes ok. But Safari in this form still does not work.
Comments like update Safari are not accepted.
I don't use techniques like Grunt and Autoprefixer - do they really solve my problem?.. It just takes time to learn.... Is there a faster solution?..

Answer 3

caniuse.com/#feat=flexbox claims that the current Safari 8 is friendly with flexbox only through the -webkit- prefix

Answer 4

Run through the Prepros 'a autoprefixer. He also knows how to optimize the code.
Several times easier: you write code, for example, only in Chrome (and only for it), then you send the code to Prepros, and it independently configures everything for other browsers (speaking of CSS, for example).

Answer 5

Start using Grunt and Autoprefixer to it. Well, or Gulp and Autoprefixer to it.

Answer 6

https://autoprefixer.github.io/en/ I use this service for code prefixes.