Safari IOS Отзывчивого Сломанный

Question

Я закодирован сайт с помощью следующей сетки макета:

Grid 
*/ 

.row { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
} 

.col { 
    flex-basis: 100%; 
} 

@media screen and (min-width: 800px) { 

    .col { 
    flex: 1; 
    } 

} 

Это прекрасно работает во всех моих браузерах и устройствах, за исключением Safari на прошивке ... Это супер странно и я никогда не сталкивался с этим прежде.

Вы можете посмотреть на сайте по адресу: https://etmartinkazoo.github.io/evolution/

Вы можете просмотреть репозиторий с кодом по адресу: https://github.com/etmartinkazoo/evolution

Любая помощь будет принята с благодарностью, спасибо!

Answer 1

Ваш сайт не отображается правильно в последней версии Safari. Я бы предложил префикс вашего css, чтобы убедиться, что вы получаете одинаковый макет в (всех) браузерах.

Вот некоторые SASS Примеси, которые позволят вам сделать это простым способом

@mixin flexbox() { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

@mixin flex($values) { 
    -webkit-box-flex: $values; 
    -moz-box-flex: $values; 
    -webkit-flex: $values; 
    -ms-flex: $values; 
    flex: $values; 
} 

@mixin order($val) { 
    -webkit-box-ordinal-group: $val; 
    -moz-box-ordinal-group: $val;  
    -ms-flex-order: $val;  
    -webkit-order: $val; 
    order: $val; 
} 

.wrapper { 
    @include flexbox(); 
} 

.item { 
    @include flex(1 200px); 
    @include order(2); 
} 

взглянуть на эту ссылку для большего количества примеров. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Для получения дополнительной информации о дерзости, идите сюда http://sass-lang.com/