Repository navigation
Flex grid not working on iOS 8 #25429
Description
Activity
but you use col-md-2 col-md-10 so ... this behavior is correct ?... no ?
@jipexu Whoups, wrong screenshot attached. Edited. Thanks for the heads up!
This behavior is not as expected using Bootstrap - the columns should wrap when the viewport is only 320px wide, as per the Chrome emulator.
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.
It works using verdor prefixes, e.g.
-webkit-flex-wrap: wrap;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.Perhaps more info at #24941 (comment).
If you look in the autoprefixer settings, iOS is set to >=9, maybe it will help if it is dialed back to >=8
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.
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.
I think actually we'll want to pass on this and update our docs to be iOS 9+. iOS 8 is 1.19% of the iPhone market share according to https://data.apteligent.com/ios/. The move to iOS 9+ came in #22943 last June.
In fact, I don't think we list our current browserslist anywhere. Maybe we could load it from package.json on build time, but I'm not sure it will work since package.json isn't in the
_datafolder.Anyway, your call. I agree that iOS 8 is old plus anyone can just use autoprefixer.
iOS >=7in my browserslist did the trick for me. Regardless of if you guys choose to include these prefixes in the baked css for bootstrap 4, perhaps some more documentation is in order. There's some confusion out there as it relates to market presence of IOS<=8. Browserstack, for some reason, includes ios8 instances as high priorities to test (https://www.browserstack.com/test-on-the-right-mobile-devices). So, web devs testing using browserstack will be testing bootstrap 4 in ios8 quite a bit, I'd imagine (...and pulling their hair out :)).I encountered the same problem on my iPhone6 plus, iOS8.2. The solution is to use prefixfree.js (https://github.com/LeaVerou/prefixfree), it can make flex-wrap work correctly with "-webkit" prefixes.
- added a commit that references this issue
on Mar 31, 2018 - added a commit that references this issue
on Apr 1, 2018
Pretty much like #22223
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.