Flexbox Ошибка Safari (flex-wrap)

Ответ 1

У меня такая же проблема с сафари. Я удалил класс row из кода, и он отлично работает.

<div class="flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>
<style>
  .flexthis{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flexthis .col-md-4{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
</style>

Зачем удалять row? Ответ прост в bootstrap row имеет некоторые другие атрибуты с ним, например: after,: before content. Таким образом, удаление строки уменьшает эти накладные расходы и позволяет гибкому функционировать должным образом.

Ответ 2

Объяснение

Это происходит потому, что Safari рассматривает: before и: после псевдоэлементов, как если бы они были реальными элементами. Например. подумайте о контейнере с 7 элементами. Если в контейнере есть: до и: после того, как Safari будет позиционировать элементы следующим образом:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

Решение

В качестве альтернативы принятому ответу я удаляю: before и: after из контейнеров flex вместо изменения HTML. В вашем случае:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

Ответ 3

Я знаю, что проблема довольно старая, но сегодня я столкнулся с этой проблемой и потратил более 12 часов на ее исправление. Хотя около 10 часов из этого были потрачены на понимание того, что сафари терпит неудачу с сеткой с бутстрапом с 12 колонками, и это не проблема.

Исправить, что я сделал, довольно просто. Вот версия для Visual Composer. Имена классов могут отличаться для других фреймворков.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

Ответ 4

Нашел эту проблему, пытаясь сделать простую сетку, используя Bootstrap для TwentyThree CMS, и получил ту же ошибку в Safari. Во всяком случае, это разрешило это для меня:

.flex-container:before {
  display: inline;
}

Ответ 5

Я не хотел добавлять дополнительные классы для исправления такого рода ошибок, так что вы также можете исправить сам класс .row.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 

Ответ 6

Кажется, что это ошибка в рендеринге Safari, заставляя столбцы переполняться (и, следовательно, обертывать) контейнер Bootstrap (возможно, какая-то ошибка округления Webkit?). Поскольку вы используете Bootstrap, вы можете добиться желаемого результата без использования flex:

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

Но! Теперь проблема, касающаяся вашего примера, заключается в том, что вам нужно, чтобы ваши блоки продукта были одинакового размера, или сетка не будет сохранять форму. Одно из возможных решений - дать .product фиксированную высоту и настроить с помощью медиа-запросов.

Вот пример, который я сделал в Safari и других браузерах: http://codepen.io/anon/pen/PZbNMX Кроме того, вы можете использовать правила стиля, чтобы сохранить изображения или текст описания в определенном размере, чтобы упростить обслуживание.

Еще одно возможное решение - использовать плагин script или jQuery, чтобы обеспечить более динамичный единообразный размер, но я не так сообразителен в этом.

Я столкнулся с той же проблемой при попытке комбинировать flex и Bootstrap с помощью Safari, поэтому я надеюсь, что это поможет.

Ответ 7

У меня была та же проблема, и ответ заключался в том, что Flex-флажок на сафари не похож на то, что поплавки очищаются на том же div, что и display: flex.

Ответ 8

.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

Ответ 9

Мне удалось исправить это, добавив

.row:before, .row:after {
display: flex !important;
}

Очевидно, это не самое изящное решение, но пока оно может работать некоторое время, пока они не исправят его.

Ответ 10

Я потратил несколько часов на эту проблему. В моем случае я вставил flexbox в существующий проект, чтобы все элементы в row имели одинаковую высоту. Все браузеры, за исключением Safari, отображали его правильно, но ни один из вышеперечисленных ответов, похоже, не устранил мою проблему.

Пока я не обнаружил, что используется Bootstrap clearfix hack: (код из laravel, но generic Bootstrap в противном случае)

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

По-видимому, другие браузеры, чем Safari, игнорируют .clearfix в некотором роде, когда используется flexbox.

Итак, при использовании flexbox в ваших столбцах больше нет необходимости использовать Bootstrap clearfix.