Flexbox enveloppe la dernière colonne de la première ligne de Safari

La dernière colonne de la première ligne est placée sur la ligne suivante lors de l’affichage dans Safari et d’autres navigateurs iOS.

Safari:

entrer la description de l'image ici

Chrome / Autres:

entrer la description de l'image ici

Code:

.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; } 
 

Name

Description

Explication

Cela se produit parce que Safari traite: les pseudo-éléments before et: after comme s’ils étaient des éléments réels. Par exemple, pensez à un conteneur contenant 7 articles. Si le conteneur a: before et: after Safari positionnera les éléments comme ceci:

 [:before ] [1st-item] [2nd-item] [3rd-item] [4th-item] [5th-item] [6th-item] [7th-item] [:after ] 

Solution

Comme alternative à la réponse acceptée, je supprime: before &: after des conteneurs flexibles au lieu de modifier le code HTML. Dans ton cas:

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

Juste pour faire le point sur ma question

C’est la solution que je propose, c’est évidemment le cas pour Bootstrap4, qui est compatible avec la flexbox. Donc, ce n’est que pour bootstrap3.

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

Je sais que le problème est assez ancien, mais je suis tombé sur ce problème aujourd’hui et j’ai perdu plus de 12 heures pour le réparer. Bien qu’environ 10 heures aient été consacrées à la réalisation de cet échec avec une grid de démarrage à 12 colonnes, ce n’est pas le cas.

Le correctif que j’ai fait est plutôt simple. Voici la version de Visual Composer. Les noms de classe peuvent varier pour les autres frameworks.

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

Je ne voulais pas append plus de classes pour corriger ce type de bogue, aussi vous pouvez corriger la classe .row elle-même.

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

J’ai trouvé ce problème en essayant de faire une grid simple en utilisant Bootstrap pour le CMS TwentyThree , et j’ai eu le même bogue dans Safari. En tout cas, cela a résolu le problème pour moi:

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

Cela semble être un bogue dans le rendu de Safari, provoquant le débordement des colonnes (et donc le retour à la ligne) du conteneur Bootstrap (une sorte d’erreur d’arrondi Webkit peut-être?). Puisque vous utilisez Bootstrap, vous devriez pouvoir obtenir le résultat souhaité sans utiliser de flex:

 

Name

Description

Mais! Maintenant, le problème avec votre exemple est que vous devez garder vos blocs de produit exactement de la même taille ou que la grid ne garde pas sa forme. Une solution possible consiste à donner à .product une hauteur fixe et à ajuster à l’aide de requêtes multimédia.

Voici un exemple que j’ai réalisé et qui fonctionne dans Safari et d’autres navigateurs: http://codepen.io/anon/pen/PZbNMX En outre, vous pouvez utiliser des règles de style pour conserver des images ou du texte descriptif dans une certaine taille afin d’en faciliter la maintenance. .

Une autre solution possible consiste à utiliser un script ou un plug-in jQuery pour permettre un dimensionnement uniforme plus dynamic, mais je ne suis pas aussi averti avec ce genre de choses.

J’ai rencontré le même problème en essayant de combiner flex et Bootstrap en utilisant Safari, alors j’espère que cela vous aidera.

J’ai eu le même problème et la réponse a été que Flex box on safari ne semble pas aimer que les flottants soient effacés sur le même div que display: flex.

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

J’ai pu résoudre ce problème en ajoutant

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

Évidemment, ce n’est pas la solution la plus élégante, mais elle peut fonctionner pour certains entre-temps jusqu’à ce qu’elle soit réparée.

J’ai également passé quelques heures sur cette question. Dans mon cas, j’ai inséré flexbox dans un projet existant pour que tous les éléments d’une row aient la même hauteur. Tous les navigateurs, à l’exception de Safari, l’ont correctement rendu, mais aucune des réponses ci-dessus n’a semblé résoudre mon problème.

Jusqu’à ce que je découvre qu’il y avait encore un hack Bootstrap clearfix utilisé: (le code provient d’un projet Laravel , mais sinon Bootstrap générique)

 @foreach ($articles as $key => $article) @if ($key % 3 === 0)  @endif @if ($key % 2 === 0)  @endif etc... @endforeach 

Apparemment, d’autres navigateurs que Safari ignorent le .clearfix d’une manière ou d’une autre lorsque la flexbox est utilisée.

Ainsi, lorsque vous utilisez flexbox sur vos colonnes, vous n’avez plus besoin d’utiliser le clearfix de Bootstrap.

Bootstrap 4 a des problèmes avec display: block; propriété lorsqu’il est défini à partir de css ou de javascript dans la classe .row. J’ai trouvé une solution pour cela Créez simplement une classe comme:

 .display-block { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; }