Flexbox not working on iPad and Safari [duplicate]

Question

I'm using flexbox on a website and it crashes on iPad Air, iPad 3 and Safari PC.

The design and the code is similar to this codepen. http://codepen.io/anon/pen/xwJzEg/

display: flex;
flex-wrap: wrap;

This is how it looks on those devices where the problem occurs:

Any advice how to workaround this?

Answer 1

You may want to consider Safari browser support for flexbox.

Although Safari 9 supports all standard flex properties, with Safari 8 and older you'll need to use vendor prefixes.

Make this adjustment to your 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";
}

See flexbox browser support here: http://caniuse.com/#search=flexbox

Consider using Autoprefixer.

See flexbox code samples with prefixes: The Ultimate Flexbox Cheat Sheet

Answer 2

I used Autoprefixer as suggested in the answers.

I use gulp to handle this when I write SASS. Here is a guide.

Answers here are suggesting to use a prefixed property before the non prefixed one. I agree with a small correction.

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

Ideally, you need to list all of the prefixed properties before you start using the non prefixed ones. @Michael_B answer is not perfect in my opinion.

I hope people will find this useful.

Answer 3

Have you tried setting flex values for the first-child and last-child li elements? I've found that iPads can get confused if none of the flex-items in a flex-container have a flex value. For example:

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