CODEWITHSUNDEEP
htmlcsssafariflexbox
user1406440
user1406440

Reputation: 1645

Flexbox not working (wrapping) as expected in Safari

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! :)

Upvotes: 1

Views: 980

Answers (2)

user1406440
user1406440

Reputation: 1645

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! :)

Upvotes: 2

glaux
glaux

Reputation: 710

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.

Upvotes: 1

Related Questions