Problem with flex grid system on iPhone 5s (iOS 9)

[fsasvari]

The grid system is not working on both Google Chrome and Safari on iPhone 5s with iOS 9 installed.

We are using Bootstrap v4 alpha-6 SASS version with including only files we need. Website works on all other devices - Desktop, laptops, tablets (iPad and Android) and other mobile phones (Android, Windows Phone).

• Operating system: iPhone 5s (iOS 9)
• Browser: both Safari and Chrome
• Website: https://www.poljinos.hr/en/

The problem is with grid system, it is displaying all col-* items in one row and website is more then 100% wide.

Any suggestions why this is happening ?

[mdo]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

---

This is a saved reply.

[mdo]

Closed for lack of update and live demo.

[adamcolpitts]

still a major problem

[mebibou]

I just had the same issue and found this: https://github.com/philipwalton/flexbugs#flexbug-11
I was using:

<div class="row">
  <div class="col">
    <img style="width: 200px" >
  </div>
  <div class="col">
    <img style="width: 200px" >
  </div>
  <div class="col">
    <img style="width: 200px" >
  </div>
  <div class="col">
    <img style="width: 200px" >
  </div>
</div>

and thought the images would just go on the next line if couldn't fit on one line, but on Safari on an iPhone 5s it would just stay on a single line. Solution was to set:

.row > .col {
  flex-basis: 200px;
}

[Adeniran2020]

I'm glad it worked.