Flexbox nie działa na iPadzie i Safari

Question

Używam flexbox na stronie internetowej i ulega on awarii na iPad Air, iPad 3 i Safari PC.

Projekt i kod są podobne do tego codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex; 
flex-wrap: wrap; 

Jak to wygląda na tych urządzeniach, w których występuje problem:

Wszelkie porady jak to obejść?

Answer 1

Możesz rozważyć obsługę przeglądarki Safari dla Flexbox.

Mimo że Safari 9 obsługuje wszystkie standardowe właściwości flex, w Safari 8 i starszych musisz użyć prefiksów dostawcy.

Ustaw tę regulację do kodu:

.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 wsparcie przeglądarka schematu flexbox tutaj: http://caniuse.com/#search=flexbox

Rozważ użycie Autoprefixer.

zobaczyć próbki kod schematu flexbox z prefiksów: The Ultimate Flexbox Cheat Sheet

Answer 2

Czy próbowałeś ustawiania wartości Flex pierwszego dziecka i-last-child elementów li? Odkryłem, że iPady mogą się zdezorientować, jeśli żadna z elementów flex w pojemniku flex nie ma wartości flex. Na przykład:

.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

Użyłem Autoprefixer zgodnie z sugestiami w odpowiedziach.

Używam łyka, aby sobie z tym poradzić, pisząc SASS. Oto guide.

Odpowiedzi sugerują, aby użyć przedrostkowej właściwości przed nieprzedstawionym. Zgadzam się z niewielką poprawką.

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

Najlepiej, jeśli przed rozpoczęciem korzystania z tych nieprefiksowanych należy wyświetlić wszystkie wstępnie ustawione właściwości. @Michael_B odpowiedź nie jest idealna w mojej opinii.

Mam nadzieję, że ludzie uznają to za przydatne.