Bug d'affichage Flexbox avec Safari

Bonjour à tous,

Je me remets doucement dans l'intégration depuis peu et j'ai souhaité utiliser le système flexbox qui me semblait beaucoup plus optimal et rapide à utiliser.
N'ayant pas encore cerné toutes les subtilités de Flexbox, je viens de voir que l'affichage bug sur Safari.
Quand la première box prend 100% de la l'écran, les 2 box suivantes doivent se placer en dessous (50% de large chacune), or sur Safari elles s'affichent sur une seule ligne (on doit d'ailleur scroller horizontallement pour voir la suite).

J'ai passé beaucoup de temps à essayer par différents préfixes de remédier à cela mais je bloque toujours et perds beaucoup de temps.
Pour illustrer cela, j'ai refait un morceau du problème sur codepen:
http://codepen.io/charlychach/pen/akgObw?editors=1100

je remets quand-même le code:

<div class="flexCont">
	<div id="box1" class="flexBox">
     
          <a href="#"><img src='http://charlenelamy.com/cinktank_new/img/img-box-1.jpeg'></a>
      
	</div>
	<div id="box2" class="flexBox"><div class="card_image ">
				        <img src="http://charlenelamy.com/cinktank_new/img/img-box-2.jpeg" />
			      </div>
	</div>
	<div id="box3" class="flexBox"><div class="card_image ">
				        <img src="http://charlenelamy.com/cinktank_new/img/img-box-2.jpeg" />
			      </div>



</div>

* {	box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}
.flexCont{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	max-width: 1200px;
}



.flexBox{
	-webkit-box-flex: 1 0 50%;
	-webkit-flex: 1 0 50%;
	    -ms-flex: 1 0 50%;
	        flex: 1 0 50%;
	border: solid 1px;
	min-height: 200px;
	min-width:200px;
}

#box1{
  flex: 0 0 100%;
  -webkit-box-flex: 0 0 100%;
  -ms-flex: 0 0 100%;
  -webkit-flex: 0 0 100%;
}

.flexBox img{
width:100%;
 }

Merci d'avance pour vos explications éventuelles
Modifié par Felipe (24 Aug 2016 - 17:26)

Bonjour et bienvenue,

si tu es un peu à l'aise avec la ligne de commande ou le développement, faire passer tes CSS par Autoprefixer va BIEN te faciliter la vie (à l'époque on utilisait le logiciel graphique Prepros 4 qui existait en version grautite, maintenant c'est node/npm, gulp, etc)
Dans le Codepen proposé, dans Settings on remarque qu'Autoprefixer est d'ailleurs activé

Safari > on parle bien d'un Safari OS X d'après ton navigateur (que je vois en tant que modo), pas l'antédiluvien Safari Windows donc ça OK. Au moins Safari 6.1 d'après caniuse.com pour que le wrap fonctionne.

Je n'ai pas testé mais mes 2 liens favoris sont la cheatsheet https://css-tricks.com/snippets/css/a-guide-to-flexbox/ et les flexbugs, peut-être ton problème y apparait-il ?
Modifié par Felipe (24 Aug 2016 - 17:36)

Bonjour Felipe,

Merci pour ton aide. J'avais en effet étudié le guide flexbox sur css tricks mais ça ne m'a pas suffit .
Je pense que quoi qu'il en soit, le problème doit être au niveau de flex:wrap puisque mes items ne passent pas à la ligne bien que mon container à une largeur maximale.

Avec Autoprefixer j'ai ajouté

-ms-flex-flow: row wrap;
flex-flow: row wrap; 

mais c'est toujours pas ça... J'ai regardé les bugs connus sur ton lien mais là encore je n'ai rien vu.
Je poursuis mes recherches dans tous les cas.

Bonsoir !

Je ne suis pas sure que ce soit ça mais :
https://bugs.webkit.org/show_bug.cgi?id=136041


(Edit : pas sure du tout...)
Modifié par Zelena (24 Aug 2016 - 19:12)

Bonsoir Zelena,
merci pour ce lien que j'ai tenté de comprendre

Je pense ne pas avoir tout saisie dans la solution apportée par Philip Walton
"Safari uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's `flex-basis` value, or its width if the flex basis is set to `auto`.

This is problematic when using the `flex: 1` shorthand because that sets the flex basis to `0%`, and an infinite number of flex items could fit on a single line if the browser thinks their widths are all zero. The bug above (http://codepen.io/philipwalton/pen/BNrGwN) show an example of this happening.

This is also problematic when creating fluid layouts where you want your flex items to be no bigger than X but no smaller than Y. Since Safari ignores those values when determining how many items fit on a line, that strategy won't work."

d'ailleurs, la solution qu'il propose ne fonctionne pas sur safari IOS, les items sont en colonne:

<div class="FlexContainer">
  <div class="FlexItem">Item 1</div>
  <div class="FlexItem">Item 2</div>
  <div class="FlexItem">Item 3</div>
  <div class="FlexItem">Item 4</div>
  <div class="FlexItem">Item 5</div>
  <div class="FlexItem">Item 6</div>
</div>

/**
 * Flexbug demo 11.1.a (bug)
 */

.FlexContainer {
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-wrap: wrap;
  margin: 1em;
  padding: 1em;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  flex: 1;
  margin: 1em;
  min-width: 200px;
  padding: 1em;
}

je commence juste avec Flexbox, j'ai vraiment simplement cette histoire d'item qui dépassent du conteneur et qui restent sur une ligne avec Safari... ça avait pourtant si bien commencé