Bug di Flexbox Safari (flex-wrap)

Question

Non so perché ma Safari disattiva sempre gli elementi.

Safari:

Chrome (altri &):

Codice:

<div class="row 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> 

Answer 1

solo per aggiornare la mia domanda

Questa è la soluzione vado con, questo è ovviamente fissato per Bootstrap4, che è FlexBox compatibili. Quindi questo è solo per bootstrap3.

.row.flexthis:after, .row.flexthis:before{ 
 
    display: none; 
 
}

Answer 2

Questo sembra essere un bug nel rendering di Safari causando l'overflow delle colonne (e quindi il wrapping) del contenitore Bootstrap (una sorta di errore di arrotondamento Webkit forse?). Dato che stai usando Bootstrap, dovresti essere in grado di ottenere il risultato desiderato senza usare 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> 

Ma! Ora il problema guardando il tuo esempio è che è necessario mantenere il blocco del prodotto esattamente della stessa dimensione o la griglia non manterrà la sua forma. Una possibile soluzione è quella di dare .product un'altezza fissa e regolare utilizzando le query multimediali.

Ecco un esempio che ho fatto che funziona in Safari e altri browser: http://codepen.io/anon/pen/PZbNMX Inoltre, è possibile utilizzare le regole di stile per tenere immagini o testo descrittivo all'interno di una certa dimensione per rendere le cose più facili da mantenere.

Un'altra possibile soluzione è utilizzare uno script o un plug-in jQuery per consentire un dimensionamento più uniforme e dinamico, ma non sono così esperto con quella roba.

Ho incontrato lo stesso problema quando ho provato a combinare flex e Bootstrap usando Safari, quindi spero che questo aiuti.

Answer 3

Spiegazione

Ciò accade perché Safari tratta: before e: after pseudo-elementi come se fossero elementi reali. Per esempio. pensa a un contenitore con 7 articoli. Se il contenitore è dotato di: before e: after Safari posizionerà gli articoli come questo:

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

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

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

Soluzione

In alternativa alla risposta accettata rimuovo: prima &: dopo dai contenitori di flessione, invece di alterare l'HTML. Nel tuo caso:

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

Answer 4

So che la questione è piuttosto vecchio, ma mi sono imbattuto in questo problema oggi, e sprecato più di 12 ore a risolverlo. Anche se sono passate circa 10 ore di tempo per capire che il safari non funziona con la griglia di bootstrap a 12 colonne, e non c'è altro problema.

La correzione che ho apportato è piuttosto semplice. Ecco la versione per Visual Composer. I nomi delle classi possono variare per altri framework.

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

Answer 5

Non volevo aggiungere più classi per risolvere questo tipo di bug, in modo da in alternativa è possibile correggere la classe .row stesso.

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

    &:after { 
     content: ''; 
    } 
} 

Answer 6

Ho avuto lo stesso problema e la risposta è stata quella scatola Flex su safari non sembra come i carri da tagliare sulla stessa div che è esposizione: flex.

Answer 7

Trovato questo problema cercando di eseguire una semplice griglia utilizzando Bootstrap per il CMS TwentyThree e ottenuto lo stesso errore in Safari. In ogni caso, questo ha risolto per me:

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

Answer 8

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

Answer 9

sono stato in grado di risolvere il problema con l'aggiunta di

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

Ovviamente questo non è la soluzione più elegante ma può funzionare per alcuni nel nel frattempo finché non lo risolvono.

Answer 10

Ho trascorso alcune ore su questo problema. Nel mio caso ho inserito la flexbox in un progetto esistente per fare in modo che tutti gli elementi in un row abbiano la stessa altezza. Tutti i browser tranne Safari lo hanno reso correttamente, ma nessuna delle risposte precedenti sembrava risolvere il mio problema.

Fino a quando ho scoperto che c'era ancora un Bootstrapclearfix trucco in uso: (codice è da un progetto laravel, ma Bootstrap generico altrimenti)

@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 

A quanto pare, altri browser di Safari ignorare il .clearfix in qualche modo in cui viene utilizzato flexbox.

Quindi, quando si utilizza la flexbox sulle colonne, non è più necessario utilizzare la correzione di avvio di Bootstrap.