Flex grid not working on iOS 8

[IonicaBizau]

Pretty much like #22223

• Operating system and version: iOS
• Browser and version: iOS 8, Safari
• JSBIN: http://output.jsbin.com/xabirulimi

Expected (Google Chrome emulator)

Current

And this is the Bootstrap website:

---

Documentation mentions you support the latest stable versions of major browsers––I'm not sure if Safari on iOS 8 is included among these.

[jipexu]

but you use col-md-2 col-md-10 so ... this behavior is correct ?... no ?

[IonicaBizau]

@jipexu Whoups, wrong screenshot attached. Edited. Thanks for the heads up!

[asyncdesign]

This behavior is not as expected using Bootstrap - the columns should wrap when the viewport is only 320px wide, as per the Chrome emulator.

[IonicaBizau]

In case Bootstrap is not supposed to work on iOS 8, it would be handy to have some kind of CSS/JS snippets to make it work.

I guess the issue is Safari iOS 8 doesn't support flexbox.

[asyncdesign]

It works using verdor prefixes, e.g.
-webkit-flex-wrap: wrap;

[mdo]

I'm guessing something is out of whack with our autoprefixer settings. This is meant to be functioning given we include our -webkit- prefixes in most of our grid classes. We'll need to look into it more.

[mdo]

Perhaps more info at #24941 (comment).

[wolfy1339]

If you look in the autoprefixer settings, iOS is set to >=9, maybe it will help if it is dialed back to >=8

[Studio384]

Is that worth it, though? iPhone 4, iPod 4 and iPad 1 and older are the only devices that can't go beyond iOS 8. All these devices are from 2010. They are collectively worth about 1% market share from iOS devices.

According to the documentation, Bootstrap 4 should only be supporting iOS 11, not 9 and up. Nevermind 8.

[XhmikosR]

@mdo: is iOS 8 supposed to be supported?

[XhmikosR]

@mdo: from our migration docs:

Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.

So we need to fix this situation.

What should the minimum iOS version be?

[asyncdesign]

I don't think flexbox is supported properly in iOS 8 Safari and you need vendor prefixes, so makes more sense to start at iOS 9.3 Safari anyway for reasonable flexbox support.