Flexbox not working (wrapping) as expected in Safari

Question

Although I have percentage widths set on the child elements of my flexbox container Safari seems to ignore them, or at least render them slightly different. This means when 3 items should be in a row, only 2 are shown.

Here's the CodePen displaying the issue: http://codepen.io/moy/pen/BWLKbo

As you can see, on desktop each list-item should be 33.33333% wide. This doesn't happen on the first row? It's worth noting that my prefixes are added using Autoprefixer.

As soon as you remove display: flex from .mosaic the list-items line up in rows. So it is flexbox that's causing it. I need this to make sure all the list-items are the same height in a row.

I tried using flex: 1 0 auto; which was mentioned on another post but it doesn't seem to work this situation. I've not used flexbox a whole lot so my knowledge is very basic, so maybe the values just need changed?

Hope someone can help with this! :)

Thanks, it looks like I managed to fix it with what's in my answer. It looks as though the pseudo before/after classes are rendered as 'actual' objects. — user1406440, Mar 07 '17 at 09:00

score 2 · Accepted Answer · answered Mar 06 '17 at 14:33

It looks like the issue is causes by the :before/:after pseudo elements being rendered as 'solid' or having some form of content. So setting width: 0; or content: normal; seems to resolve the issue.

So on the container the CSS (scss) would be:

.mosaic {
    @include clearfix;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 $vertical-spacing;
    padding-left: 0;
    width: 100%;

    &:before,
    &:after {
        content: normal;
    }
}

Hope that helps someone else! A very annoying and frustrating bug! :)

Thanks for that idea, content normal has fixed my issue. It was BS3's clearfix that enabled the issue. — Benjamin Papp, Nov 23 '18 at 12:20

score 1 · Answer 2 · answered Mar 06 '17 at 14:04

1

This seems to be a rounding error of some sorts in the layout engine. On mobile safari at least I can get it to work by changing the width to 33% and not 33.33333%. If that is not interfering with the other designs on the page, that could be the solution.

answered Mar 06 '17 at 14:04

glaux

701
7
20

1

Yeah I noticed if I reduce the widths slightly it worked but they items don't align as well. However, I think I've fixed the issue now. It's to do with the :before/:after elements being renders as 'solid' objects. so setting `width: 0;` or `content: normal` seems to fix it! – user1406440 Mar 06 '17 at 14:28

Flexbox not working (wrapping) as expected in Safari

2 Answers2