https://developer.mozilla.org/en-US/docs...ilityTable
Je suis passé un peu vite sur le support de "filter" en CSS. Bon, normalement, même si cela n'apparaît pas, tu devrais pouvoir "cliquer" sur l'emplaceent du petit dragon et déplier le menu. Je vais corriger cela dans la foulée.
En fait, cela vient plutôt de la façon dont Webkit gère les "height".
Pour info, il existe deux notions de "height" en CSS: la "used height" et la "specified height". La used height correspond à la valeur réelle de la hauteur, et la specified height correspond à la hauteur explicitement définie par une ligne de CSS type "height: 200px;".
Flexbox, dans sa grande bienfaisance, n'altère que la "used height". Donc, un élément "flex" qui aura une apparence de 200px de haut aura en fait une "used height" de 200px, et une "specified height" de 0px (car aucune ligne de CSS ne lui donne spécifiquement de hauteur).
Or, une propriété "height" en pourcents posée sur un élément est calculée par rapport à la "specified height" de l'élément parent (boum, le drame!). Du coup, celle-ci valant "0" dans le cas d'un élément flex, l'élément enfant aura une hauteur finale de 0 (et n'apparaitra donc pas).
Firefox n'a pas ce problème, car ils se sont dit "allez, f*ck it, used et specified, c'est la même height" alors que webkit a été plus mécanique, et considère ces deux types de hauteurs comme différents.
J'ai appliqué le hack proposé dans le post Stack Overflow: "position: relative;" pour l'élément flex, et "position: absolute" pour l'élément child. Cela règle le problème de la hauteur nulle (et donc, le bouton apparait dans Opera/Chrome).
Je suis passé un peu vite sur le support de "filter" en CSS. Bon, normalement, même si cela n'apparaît pas, tu devrais pouvoir "cliquer" sur l'emplaceent du petit dragon et déplier le menu. Je vais corriger cela dans la foulée.
En fait, cela vient plutôt de la façon dont Webkit gère les "height".
Pour info, il existe deux notions de "height" en CSS: la "used height" et la "specified height". La used height correspond à la valeur réelle de la hauteur, et la specified height correspond à la hauteur explicitement définie par une ligne de CSS type "height: 200px;".
Flexbox, dans sa grande bienfaisance, n'altère que la "used height". Donc, un élément "flex" qui aura une apparence de 200px de haut aura en fait une "used height" de 200px, et une "specified height" de 0px (car aucune ligne de CSS ne lui donne spécifiquement de hauteur).
Or, une propriété "height" en pourcents posée sur un élément est calculée par rapport à la "specified height" de l'élément parent (boum, le drame!). Du coup, celle-ci valant "0" dans le cas d'un élément flex, l'élément enfant aura une hauteur finale de 0 (et n'apparaitra donc pas).
Firefox n'a pas ce problème, car ils se sont dit "allez, f*ck it, used et specified, c'est la même height" alors que webkit a été plus mécanique, et considère ces deux types de hauteurs comme différents.
J'ai appliqué le hack proposé dans le post Stack Overflow: "position: relative;" pour l'élément flex, et "position: absolute" pour l'élément child. Cela règle le problème de la hauteur nulle (et donc, le bouton apparait dans Opera/Chrome).