web-dev-qa-db-fra.com

Flexbox ne fonctionne pas sur iPad et Safari

J'utilise flexbox sur un site Web et il se bloque sur iPad Air, iPad 3 et Safari PC.

La conception et le code sont similaires à ce codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;

Voici à quoi cela ressemble sur les appareils où le problème se produit: enter image description here

Des conseils pour contourner cela?

htmlcsscss3flexbox
13
Chriss

Vous pouvez envisager la prise en charge du navigateur Safari pour Flexbox.

Bien que Safari 9 prenne en charge toutes les propriétés flex standard, avec Safari 8 et versions antérieures, vous devrez utiliser des préfixes de fournisseur.

Faites cet ajustement à votre code:

.container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: -webkit-flex; /* NEW */
    display: flex;
    -webkit-flex-wrap: wrap; /* NEW */
    flex-wrap: wrap;
    font-family: "Open Sans";
}

Voir flexbox support du navigateur ici: http://caniuse.com/#search=flexbox

Pensez à utiliser Autoprefixer .

Voir flexbox exemples de code avec préfixes: The Ultimate Flexbox Cheat Sheet

12
Michael_B

J'ai utilisé Autoprefixer comme suggéré dans les réponses.

J'utilise gulp pour gérer cela lorsque j'écris SASS. Voici un guide .

Les réponses suggèrent ici d'utiliser une propriété préfixée avant celle non préfixée. Je suis d'accord avec une petite correction.

.container {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;   
    flex-wrap: wrap;
}

Idéalement, vous devez répertorier toutes les propriétés préfixées avant de commencer à utiliser celles non préfixées. La réponse de @Michael_B n'est pas parfaite à mon avis.

J'espère que les gens trouveront cela utile.

6
Andrejs Gubars

Avez-vous essayé de définir des valeurs flex pour les éléments li du premier enfant et du dernier enfant? J'ai trouvé que les iPad peuvent être confus si aucun des éléments flex dans un conteneur flex n'a de valeur flex. Par exemple:

.container li:first-child {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}
.container li:nth-child(4) {
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1;
}
2
user3487028