Flexbox non funziona su iPad e Safari

Question

Sto utilizzando la flexbox su un sito Web e si blocca su iPad Air, iPad 3 e Safari PC.

Il design e il codice sono simili a questa codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex; 
flex-wrap: wrap; 

Questo è come appare su quei dispositivi in ​​cui il problema si verifica:

Qualche consiglio su come risolvere questo?

Answer 1

È possibile prendere in considerazione il supporto del browser Safari per il flexbox.

Sebbene Safari 9 supporti tutte le proprietà flex standard, con Safari 8 e versioni precedenti è necessario utilizzare i prefissi dei fornitori.

Eseguire la regolazione al codice:

.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"; 
} 

See supporto del browser FlexBox qui: http://caniuse.com/#search=flexbox

considerare l'utilizzo di Autoprefixer.

esempi di codice FlexBox Sede con i prefissi: The Ultimate Flexbox Cheat Sheet

Answer 2

Hai provato impostando i valori di flessione per il primo bambino e elementi li last-child? Ho scoperto che gli iPad possono essere confusi se nessuno degli articoli flessibili in un contenitore flessibile ha un valore flessibile. Ad esempio:

.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; 
} 

Answer 3

Ho utilizzato Autoprefixer come suggerito nelle risposte.

Io uso il gulp per gestirlo quando scrivo SASS. Ecco uno guide.

Le risposte suggeriscono di utilizzare una proprietà con prefisso prima di quella non prefissata. Sono d'accordo con una piccola correzione.

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

Idealmente, è necessario elencare tutte le proprietà prefissate prima di iniziare a utilizzare quelle non prefissate. @Michael_B risposta non è perfetta secondo me.

Spero che le persone lo trovino utile.