Flexbox not working on iPad and Safari

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?

Michael Benjamin · Answer 1 · 2015-11-03T16:43:32.810

17

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

edited Nov 03 '15 at 16:43

answered Nov 03 '15 at 15:24

Michael Benjamin

346,931
104
581
701

1

My biggest problems are Ipad 3 and Ipad Air on latest browsers (Chrome and Safari) – Chriss Nov 03 '15 at 15:26
What exactly is happening? Can you post an image of the problem or more details? – Michael Benjamin Nov 03 '15 at 15:30
1

Posted screenshot in the question. – Chriss Nov 03 '15 at 16:06
I just tested your code on my iPad. Works fine with prefixes added. See my revised answer. – Michael Benjamin Nov 03 '15 at 16:30
1

I'm having an iPad3 and an iPad Air on my desk and none of them works.... sadly... I still can't find the problem. I also tried that codepen with the improvements on those ipads and it shows a white screen..................... – Chriss Nov 04 '15 at 11:06
Which browser and version are you using? – Michael Benjamin Nov 04 '15 at 12:18
latest chrome and safari – Chriss Nov 11 '15 at 10:56
On latest Chrome and Safari on my iOS devices the layout works. Not sure how else I can help you, unless you want to provide exact Chrome and Safari and device version and model #'s. – Michael Benjamin Nov 11 '15 at 14:40
3

Late comment but it mostly depends on the iOS version, not the Safari version. – Capsule Jul 05 '16 at 09:44

score 7 · Answer 2 · answered Jan 02 '17 at 10:57

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.

score 3 · Answer 3 · answered Jul 27 '16 at 21:41

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

Flexbox not working on iPad and Safari

3 Answers3

Linked