18008 sujets

Questions générales et questions de débutants

Flexbox bug safari

Bonjour

J'ai un problème d'alignements avec Flexbox sur Safari.
Pour mieux comprendre, j'ai préparé un JSfiddle https://jsfiddle.net/jrtnr5b3/

L'alignement fonctionne sur Firefox et Chrome, mais pas sur Safari.
C'est un casse-tête sur lequel je travaille depuis plusieurs jours, pouvez-vous m'aider ?
Bien à vous
Modifié par Oziris (17 Feb 2017 - 14:52)
Modérateur
Bonjour,

Selon CanIuse Il y aussi un problème d'interprétation de la hauteur des enfants quand celle-ci est exprimée en pourcentage. Voyez les "Know issues".
Merci beaucoup
Je n'avais pas vus ces "Know issues".

In Safari, the height of (non flex) children are not recognized in percentages.

Mais c'est très grave ! Tout mon projet se base justement sur ces hauteurs relatives ! Comment puis-je y remédier ? Avec Javascript ? Ou des tableaux ? (mais j'y crois pas trop puisque comme mon premier jsfiddle, les alignements sont complexes)
Non puisque Flex-basis ne spécifie que les largeurs. Auriez-vous une autre proposition ?
Modifié par Oziris (17 Feb 2017 - 15:10)
Je suis très étonné de voir que Safari ne gère pas les hauteurs relatives avec Flexbox. Je suis "décontenancé" ! Bref dégouté !
Vraiment ? Aucun moyen ?
Modérateur
Oziris a écrit :
Non puisque Flex-basis ne spécifie que les largeurs. Auriez-vous une autre proposition ?
Oups, autant pour moi Smiley confused
Allez je m'y colle :

Je viens de jeter un coup d'oeil au code du premier lien : attention aux redondances (ex : text-align:center déclaré deux fois sur le même élément) et aussi aux règles mal déclarées (ex : il manque une valeur à flex).

Avec ce minimum syndical ça marche : JSFidle

Il faut reconnaitre qu'il y a un bug sous d'autres plateformes de code telle que CodePen empêchant que cela fonctionne en l'état (et ce n'est pas le premier que j'ai repéré), mais ce n'est pas le sujet...

Donc, pour ceci :
<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


Il faut au minimum ceci :
.grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100vh;
}

.grid > * {
  width: 33.33%;
  outline: 1px solid #333; /* for demo */
}

Modifié par Olivier C (18 Feb 2017 - 22:04)
Merci beaucoup d'avoir pris le temps.

Comme vous avez pu voir sur le premier lien, le but est d'instaurer une mise en page automatique en fonction du nombre de cases présentent, avec un maximum de 3 par lignes. (33.333%)
Les bouton au-dessus permettent de simuler cela.

https://jsfiddle.net/h0hjfpt9/4/

J'ai donc repris le code précédent avec les boutons au-dessus. Je constate que l'effet est le même qu'un tableau : lorsqu'une case disparaît, il y a un ou deux trous, et la case ne s'étend pas au maximum de sa largeur. Et cela même avec 

.grid > * {min-width: 33.33%;}


Donc cela est effectivement mieux écrits et fonctionnel sous Safari, mais l'effet recherché n'est pas le même. Le résultat recherché est celui du premier lien sous Firefox ou Chrome : lorsqu'il manque une ou deux cases sur une ligne, celle(s) qui reste s'étendent au maximum.
Est-ce vraiment possible ?
Modifié par Oziris (18 Feb 2017 - 14:14)
Mise à part ajouter une classe ou une règle css via javascript je n'ai pas d'idée...

Le modèle tabulaire aurait pu palier à cette difficulté mais il en crée une autre qui est que l'on ne peut travailler que ligne par ligne.
Sujet clos
Aller à