Почему Safari не корректно работает с flexbox?

Question

[mishapsv]

Использую для ленточки, текст в которой должен выравниваться по центру флексбокс.
Везде все отлично, кроме Сафари - там текст прижимается к верхней границе.
jsbin.com/pudiyajipu/edit?html,css,output
Может быть есть идеи?

Answer 1

[Сергей ZSA]

делаю так для поддержки старых браузеров и приколов с вебкитом и прочими:

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;

Это всё вместо

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

Comments

[Сергей ZSA]

SelenIT2: я изложил в целом свойства с префиксами. Конечно для -*-box wrap не актуально, но само по себе свойство порой бывает очень даже нужно. Я возился как-то с адаптацией к старым сафари, с горем пополам нашел это свойство и прописал его в emmet, чтоб особа не париться. Ну а moz и тп - я ж это всё не вручную пишу. Чокнуться можно писать вручную все префиксы, это emmet ставит сам.

[R I]

Сергей ZSA: бедняга... Autoprefixer для чего?

[Тимур Орлов]

Руслан Янбердин, К сожалению, даже сейчас, спустя три года от вашего ответа, автопрефиксер - не идеален и наполовину. В некоторых случаях самых важных префиксов просто нет у него. То есть базу данных не обновляют и не дополняют.

Answer 2

[anxieter]

Добрый день.
Столкнулся также с неправильным отображением flex-box в Safari (точнее на устройстве IPAD Mini)
Консоль разработчика в Сhrome отображает все ровно, там как раз есть эмуляция данного девайса. На самом устройстве всё едет.
Прописал
display: -webkit-box;
-webkit-align-items: center;
-webkit-justify-content: space-between;
Это почему-то стало конфликтовать, и в Chrome и других браузерах опять все едет. Удаляю display: -webkit-box; - все в Chrome становится в порядке. Но Safari в таком виде все равно не работает.
Комментарии типа обнови Safari не принимаются.
Такими техниками как Grunt и Autoprefixer не пользуюсь - они действительно способны решить мою проблему?.. Просто на изучение потребуется время.... Может есть более быстрое решение?..

Comments

[mishapsv]

anxieter можете воспользоваться https://prepros.io/

[anxieter]

спасибо. классная программка, но дорогая))

Еще раз начальный код:
display: flex;
display: -webkit-flex;
display: -webkit-box;
-align-items: center;
-webkit-align-items: center;
justify-content: space-between;
-webkit-justify-content: space-between;

И вот что она мне скомпилировала:
.div2 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

То есть все , что касается webkit - ничего нового не придумала. Так что вряд ли тут дело в префиксах....

Answer 3

[Алексей Рытиков]

caniuse.com/#feat=flexbox уверяет, что текущая Safari 8 дружит с flexbox только через префикс -webkit-

Comments

[mishapsv]

Да, сорри, похоже это из-за того, что слетели настройки автопрефиксера.

Answer 4

[Igor Lanko]

Прогоняйте через автопрефиксер Prepros'a. Он ещё и код оптимизировать умеет.

Проще в несколько раз: вы пишите код, например, только в Chrome (и только для него), потом код отправляете в Prepros, а он самостоятельно всё настраивает для других браузеров (говоря о CSS, например).

Comments

[mishapsv]

Да, спасибо. Я пользуюсь препросом, оказалось, что забыл поставить галочку напротив автопрефиксера

Answer 5

[Денис Инешин]

Начните использовать Grunt и Autoprefixer к нему. Ну или Gulp и Autoprefixer к нему.

Comments

[mishapsv]

Денис Инешин автопрефикс для гранта убили же вроде. На галп давно хочу перейти, но настройка всех тасков пока затянулась.

[Денис Инешин]

mishapsv: не убили, он перешел в deprecated, что не мешает им пользоваться. Вместо него рекомендуют переходить на PostCSS куда он уже включен по умолчанию.

Answer 6

[Владимир Куликов]

https://autoprefixer.github.io/ru/ пользуюсь этим сервисом для префиксов в коде.