Bootstrap Columns with Flexbox Are Not Taking Proper Width on iOS and Safari

Bootstrap columns with flexbox are not taking proper width on iOS and Safari

It's pseudo-element in the .row causing the problem.

This happens because Safari browser treats :before and :after
pseudo-elements as if they were real elements.

Try

 .row:before, .row:after{
      display: none;
    }

or better create a class say, .flex-row and do this

<div class="row flex-row">
  {{contents here..}}
</div>

.flex-row{
     display: flex;
    display: -webkit-flex; 
    flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex-row:before, .flex-row:after{
   display: none;
}

FIDDLE

Flexbox odd Behavior on iOS Mobile Browsers and OS X Safari

Okay, I got it licked. So for any of you Googlers out there, the way I fixed this is by changing the CSS to:

.card-grid {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;

  .data-card {
    /**
     * Height AUTO is important, because adding flex to the child makes it vertically 
     * stretch by default. So that means height: 100% won't work.
     */
    height: auto;
    //IE fallback
    display: inline-block;
    //Modern Browsers
    display: flex;
    display: -webkit-flex;

    ...

    /**
     * For some unknown reason, it still didn't work until I subracted 1% from
     * the width of each breakpoint I was using.
     */
    @media screen and (min-width: map_get($grid-breakpoints, 'lg')) {
      width: percentage((3 / 12)) - 1%;
    }

    @media screen and (min-width: map_get($grid-breakpoints, 'md')) {
      width: percentage((4 / 12)) - 1%;
    }

    @media screen and (max-width: map_get($grid-breakpoints, 'sm')) {
      width: percentage((6 / 12)) - 1%;
    }
  }
}

This solution still renders fine in Chrome, even with the 1% of the true width subracted. A few things that I discovered were:

1. Simply putting flex on the parent (to have the children's heights
   align) was not enough. I read a really great walkthrough on this
   here.
2. I was back to square one after I knew I had to keep flex on the
   parent and the immediate children. It wasn't until I set the
   widths of the children to 49% that it was fixed. I still don't
   know why this is, because it's consistent with no box-sizing:
content-box instead of what I am using which is box-sizing:
border-box. I have a star selector putting border-box on every
   element, but perhaps I need to manually specify it on the child?

3. I didn't need all the extra vendor pre-fixes I had added, since in
   my case, I am using display: inline-block as a fallback when
   flexbox isn't available. Although, if I wanted to I could have used
   the below.

   @supports not (flex-wrap: wrap) {
     ...
   }
   

   Then put some code in there. Here's another post on CSS Tricks
   that talks a little about using flexbox and fallbacks. Although, a
   different use-case than mine, it was still helpful. This was a good visual reference I'm thinking I'll keep around.

Hope all this information was helpful to someone. I know it saved my bacon.

UPDATE: Adding box-sizing: border-box to the child elements doesn't have any effect. Looks like subracting 1% from the width is the way to go, unless there's something I don't know, which is more than possible.

UPDATE 2: Due to a suggestion from a friend, and this article, I changed the code a little, started using the flex property, with column classes on the HTML as a fallback. Re-included the vendor prefixes in the form of a mixin. I also figured out the reason I was having to subtract percentages was because I had a grid container above the parent that had negative margins and clearfixes. Once this was removed the below CSS worked:

.card-grid {
  @include displayFlex;
  @include flexWrap(wrap);

  .data-card {
    /**
     * Height AUTO is important, because adding flex to the child makes it vertically 
     * stretch by default. So that means height: 100% won't work.
     */
    height: auto;
    //IE fallback
    display: inline-block;
    @include flexboxDisplay;
    @include flex(0 0 auto);

  }
}

Flexbox code working on all browsers except Safari. Why?

Flexbox is a CSS3 technology. This means it's relatively new and some browsers don't provide full support for flex properties.

Here's a run-down:

• IE 8 and 9 do not support flexbox. If you're wanting to use flex properties in these browsers, don't bother wasting your time. A flexbox polyfill made the rounds for a while, but it didn't work well and is no longer maintained.

• IE 10 supports a previous version of flexbox and requires vendor prefixes. Be aware that certain properties from the current spec aren't supported in IE10 (such as flex-grow, flex-shrink and flex-basis). See the Flexbox 2012 Property Index.

• IE 11 is good, but buggy. It's based on the current flexbox standard. See the KNOWN ISSUES tab on this page for some of the problems. Also see: flex property not working in IE

• With Chrome, Firefox and Edge you're good all around. You'll find minor bugs and inconsistencies but there are usually easy fixes. You'll need to be aware of Implied Minimum Flex Sizing, which sometimes causes sizing and scrollbar problems.

• Safari versions 9 and up support the current flexbox spec without prefixes. Older Safari versions, however, require -webkit- prefixes. Sometimes min-width and max-width cause alignment problems which can be resolved with flex equivalents. See Flex items not stacking properly in Safari

For a complete review of flexbox browser support, see this page:
http://caniuse.com/#search=flex

For a quick way to add many (but not necessarily all) vendor prefixes use Autoprefixer. For Safari, see this article for -webkit- prefixes that some prefix generators don't include.

For a list of common flex bugs and their workarounds see Flexbugs.

Also, on this site, there's:

• Flexbox Tag Info

Flexbox wraps last column of the first row in Safari

Just to update on my question

This is the solution I go with, this is obviously fixed for Bootstrap4, which is flexbox compatible. So this is only for bootstrap3.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}

flex-wrap not working as expected in Safari

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

---

Related Topics