Oui, Flexbox est buggué

raphael

À force de promettre monts et merveilles à propos de Flexbox, on finit par croire que ce module de positionnement est parfait et dénué de bugs.

Bah non, sans surprise, Flexbox est buggué. Comme tous les autres.

Ce n’est pas la faute à Flexbox hein, mais celle des navigateurs… même si au fond ça ne change pas grand chose pour nous.

Bref, aujourd’hui encore je viens de tomber sur un cas de figure où l’on se rend compte avec douleur que certaines parties des spécifications ne sont pas interprétées à l’identique par l’ensemble des navigateurs modernes.
Ici, il s’agit d’une combinaison de parent en flex-direction: column et d’enfants en flex:1. Les specs disent que les enfants doivent avoir la hauteur minimum de leur contenu et non pas 0 comme le laisse sous-entendre flex:1 (= flex-basis: 0).

Jugez vous-mêmes : http://codepen.io/raphaelgoetter/full/dpqjZO/

capture-decran-2016-10-17-a-16-18-21

Ceci dit, buggué ou non, Flexbox demeure le plus stable des modes de positionnement actuels, sachant que Float compte parmi le plus buggué de tous les positionnements (qui se souvient de Positioniseverything qui recensait pas moins de 20 bugs de Float uniquement sur IE ?); et que Grid Layout s’annonce très prometteur en terme de bugs également eu égard à l’adoption prématurée de IE10 d’une version très obsolète de la spécification en cours…

J’en profite pour rappeler qu’il existe une Bible des Bugs connus de flexbox, que l’on devrait tous conserver sur notre table de chevet : Flexbugs.

Dans cette bible, vous apprendrez que parmi les anomalies les plus courantes, vous rencontrerez sans doute (au moins) celles-ci :

  1. les éléments inline (<span>, <a>, ::before, ::after, …) ne sont pas traités comme des flex-items (sur IE10 et IE11),
  2. le modèle de boîte box-sizing: border-box n’est pas appliqué sur la propriété flex-basis. Les padding et border s’ajoutent donc à la taille (sur IE10 et IE11),
  3. calc() n’est pas reconnu au sein de flex-basis ou flex. Exemples : flex:0 0 calc(100%/3) ou flex-basis: calc(100%/3) (sur IE10 et IE11),
  4. sur IE10-IE11, flex-basis nécessite une unité, même pour la valeur 0 : donc flex: 1 1 0;  n’est pas reconnu par exemple,
  5. sur IE10, flex-shrink vaut 0 par défaut et non 1, donc : par défaut un flex-item IE10 vaut flex: 0 0 auto; et non flex: 0 1 auto; Gare à vos flex:1; !

(notez qu’il s’agit d’un pur hasard si je ne suis tombé que sur des bugs d’Internet Explorer ;))

Allez, courage !

7 réflexions au sujet de « Oui, Flexbox est buggué »

  1. Perso, mes premières rencontres avec Flexbox ont été plutôt froides, car je suis malheureusement régulièrement tombé sur des Flexbugs avec IE10/11, du coup, ça calme :-\

    Si c’est en amélioration progressive, pro tip : mettre les propriétés dans un @supports (display: flex) => ce n’est supporté qu’à partir de Edge, qui n’a pas certains de ces flexbugs🙂

Par contre, j’aurais plutôt l’impression que c’est le CSS table-layout le plus robuste, en tout cas, c’est celui avec lequel j’ai le moins d’emmerdes (même s’il n’est pas exempt de bugs).

    1. (Gni? Repost) Perso, mes premières rencontres avec Flexbox ont été plutôt froides, car je suis malheureusement régulièrement tombé sur des Flexbugs avec IE10/11, du coup, ça calme :-\

      Si c’est en amélioration progressive, pro tip : mettre les propriétés dans un @supports (display: flex) => ce n’est supporté qu’à partir de Edge, qui n’a pas certains de ces flexbugs🙂

      Par contre, j’aurais plutôt l’impression que c’est le CSS table-layout le plus robuste, en tout cas, c’est celui avec lequel j’ai le moins d’emmerdes (même s’il n’est pas exempt de bugs).

  2. Bonjour, cet article me rassure :), j’ai été confronté dernièrement à un flexcassetête :), pour lequel j’ai dû trouver un compromis, et surtout oublier ce que je voulais réellement faire de cette intégration ( caler à gauche des div dynamiques d’une dernière ligne d’une liste d’article d’un blog, dans le cas où il n’y a pas le nombre convenu dans les lignes au-dessus, qui elles sont caler à gauche et à droite puis centrer au milieu, bref…). Flex fait rêver, mais dans certains détails, pas toujours évident à cerner et à rendre compatible avec tous les nav (notamment safari).

  3. Merci d’avoir listé tout ça !

    sur IE10, flex-shrink vaut 0 par défaut

    J’étais tombée sur ce point récemment, ça fait bizarre. Mais au moins c’est un bug facile à repérer et à réparer (aha) – pas comme celui avec calc() dans flex-basis… Dans ce dernier cas, tu sais si on a un recours, ou un contournement ?

Les commentaires sont fermés.