iPad Air doesn't display my foundation 6 site properly

Question

I am using Foundation 6 in a Wordpress site. The issue I face is solely happening on iPad Air. It works fine on older iPads and all other devices and browsers. What happens is that I have 6 small-2 columns but the last one is displayed in a new line. I dont understand how this can happen.

Here is the page: https://lagalope.com/the-collection-2/

Here is the html structure:

<div class="row">
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
  <div class="small-2 column">
    content....
  </div>
</div>

When I reproduce this in a JSFiddle this is working fine so it means there is something wrong in my wordpress theme...: https://jsfiddle.net/curuba/s5twohf5/2/

[EDIT] It seems it is resolved when I avoid using flex-grid. When I comment the following line, all is fine:

@include foundation-flex-grid;

I don't understand why this is causing the issue. I let this question as unanswered as this is just a further direction to the root cause but not a resolution.

Answer 1

Try this :

// Fix ios flex bug
.row {
  .column:first-child {
    flex: 1 1 0;
  }
}