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

Использую для ленточки, текст в которой должен выравниваться по центру флексбокс.
Везде все отлично, кроме Сафари - там текст прижимается к верхней границе.
jsbin.com/pudiyajipu/edit?html,css,output
Может быть есть идеи?
  • Вопрос задан
  • 20174 просмотра
Пригласить эксперта
Ответы на вопрос 6
serjikz
@serjikz
web-developer
делаю так для поддержки старых браузеров и приколов с вебкитом и прочими:
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;
Ответ написан
anxieter
@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 не пользуюсь - они действительно способны решить мою проблему?.. Просто на изучение потребуется время.... Может есть более быстрое решение?..
Ответ написан
chlp
@chlp
фулстек
caniuse.com/#feat=flexbox уверяет, что текущая Safari 8 дружит с flexbox только через префикс -webkit-
Ответ написан
zzloy
@zzloy
Дизайнер
Прогоняйте через автопрефиксер Prepros'a. Он ещё и код оптимизировать умеет.

Проще в несколько раз: вы пишите код, например, только в Chrome (и только для него), потом код отправляете в Prepros, а он самостоятельно всё настраивает для других браузеров (говоря о CSS, например).
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Начните использовать Grunt и Autoprefixer к нему. Ну или Gulp и Autoprefixer к нему.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы