Feature request: iOS 7-8 compatibility

[andris-05]

Currently Bootstrap 4 beta 2 is not compatible with browsers on iOS 7 - 8. Below you can see visitor data from my website (last 6 months, unique visitors). As you can see iOS 7 - 8 users account for 0.83% of total users, far more than IE10. This is far too many users (and revenue) just to ignore.

To make the grid compatible you would have to add the "-webkit-" prefix to all flexbox related properties, I'm sure there are other instances where css fixes would have to be applied.

[wolfy1339]

This is in the works, it might be added as unofficial support

[Herst]

It's worth noting that it's no problem concerning jQuery 3 as it also supports iOS 7.

[mdo]

#24919 added WebKit prefixes, so closing out.

[amydepalma]

Hello! I'm not sure that #24919 resolved the issue to add support for iOS 8 (I don't have access to iOS 7 and Cross Browser doesn't have it so I couldn't test). I looked at the Bootstrap Examples page on an iPad Air 8.1 and ran cross browser testing -- the columns don't wrap to the next row.

I believe instead of "display: -webkit-box;", it should be "display: -webkit-flex;" and the .col's don't have the appropriate -webkit prefixes. For example:

.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}

should be

.col-1 {
-webkit-flex: 0 0 8.333333%; /* Notice the shrink and basis is added here; 'box' is removed */
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%
}

There are a few other properties that should have "-box" removed in favor of just "-webkit-flex-PROPERTYNAME." There would be a few more CSS changes in regards to the utility classes as well.

To note, I have only looked at (and am only using) the grid version, so I am sure there are other instances in the components that use flexbox that I am not aware of.

Thanks!