Flexbox Safari bug (flex-wrap)

Ask Question

up vote
17
down vote
favorite
7
I don’t know why but Safari always misplaces the elements.

Safari:

enter image description here

Chrome (&others):

enter image description here

Code:

Name

Description

.flexthis{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.flexthis .col-md-4{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

css twitter-bootstrap css3 twitter-bootstrap-3 flexbox
shareedit
edited Dec 13 ’15 at 11:03

Manoj Kumar
16k62856
asked Dec 13 ’15 at 10:50

DN.
117118

it’s not only Safari, but almost all browsers on iOS have this bug – safari, chrome, firefox, opera – Stan Fad May 10 at 19:07
add a comment
8 Answers
active oldest votes
up vote
10
down vote
accepted
I have the same problem with safari only. I have removed the class row from the code and it works fine.

Name

Description

.flexthis{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.flexthis .col-md-4{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

Why remove row ? Answer is simple in bootstrap row has some other attributes with it like :after, :before content. So removing row reduces this overhead and allow flex to work properly.

shareedit
answered Jan 26 ’16 at 6:41

squiroid
9,61832550
1
Removing row doesn’t entirely “fix” the problem as it will add an extra gap to the elements on each side of the row – which row is meant to remove, so the layout is affected. The answer from Taylan works though. – Ben Jun 20 ’16 at 2:11
1
Alternatively, it’s also possible to fix this by adding an extra div inside the row and setting flex on that div – Ben Jun 20 ’16 at 2:12

it is caused by :before :after elements. See answer below. – dewwwald Oct 5 ’16 at 14:00
add a comment

up vote
2
down vote
Found this issue trying to do a simple grid using Bootstrap for the TwentyThree CMS, and got the same bug in Safari. Anyway, this solved it for me:

.flex-container:before {
display: inline;
}
shareedit
answered Apr 10 at 12:29

Simen
753
add a comment
up vote
0
down vote
I had the same problem and the answer was that Flex box on safari doesn’t seem to like the floats being cleared on the same div that is display: flex.

shareedit
answered Feb 8 at 17:02

Cam Tullos
1,4081010
add a comment
up vote
42
down vote
Explanation

This happens because Safari treats :before and :after pseudo-elements as if they were real elements. E.g. think about a container with 7 items. If container has :before and :after Safari will position the items like this:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after ]
Solution

As an alternative to the accepted answer I remove :before & :after from flex containers instead of altering the HTML. In your case:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
content: normal; // IE doesn’t support `initial`
}
shareedit
edited Oct 14 ’16 at 7:56
answered Apr 7 ’16 at 12:44

Taylan
9271222
2
I can confirm resetting before and after fixes the issue in Safari – Ben Jun 20 ’16 at 2:08

I can confirm it too. Seems to be the best answer. – rap-2-h Jun 20 ’16 at 8:00
1
This really should be the answer. The structure is unchanged, only a css edit to correct the OP’s problem. – Simon Jul 14 ’16 at 4:38

Thanks – this resolves an issue with Foundation’s flex grid in Safari – athms Sep 19 ’16 at 9:15

Awesome! Thank you! – DrDiv Oct 7 ’16 at 18:54
show 2 more comments
up vote
1
down vote
I didn’t want to add more classes to fix this kind of bug, so alternatively you can fix the .row class itself.

.row {
&:before {
content: none;
}

&:after {
content: ”;
}
}
shareedit
answered Aug 25 ’16 at 15:27

Joeri Wauters
194
add a comment
up vote
3
down vote
I know the issue is quite old, but I ran into this issue today, and wasted over 12 hours in fixing it. Though about 10 hours out of that were spent in realizing that safari is failing with 12-column bootstrap grid, and it is no other issue.

Fix that I made is rather simple. Here is the version for Visual Composer. Class names may vary for other frameworks.

.vc_row-flex:before, .vc_row-flex:after{
width: 0;
}
shareedit
answered Jul 11 ’16 at 13:11

Gaurav
536
add a comment
up vote
0
down vote
I can’t test Safari, since I don’t have a Mac.

Flexbox no longer needs prefixes.
.flexthis has justify-content:center;
.col-md-4 col-sm-6 has flex-flow: column wrap; and flex: 1 1 auto;
https://jsfiddle.net/zer00ne/qdnjear8/

shareedit
answered Dec 29 ’15 at 3:01

zer00ne
13.8k31240
add a comment
up vote
0
down vote
This seems to be a bug in Safari’s rendering causing the columns to overflow (and therefore wrap) the Bootstrap container (some kind of Webkit rounding error maybe?). Since you are using Bootstrap, you should be able to achieve the desired result without using flex:

Name

Description

.product {
/* this is to automatically center and prevent overflow
on very narrow viewports */
display: inline-block;
max-width: 100%;
}

But! Now the problem looking at your example is that you need to keep your product blocks the exact same size or the grid won’t keep it’s shape. One possible solution is to give .product a fixed height and adjust using media queries.

Here is an example I made that works in Safari and other browsers: http://codepen.io/anon/pen/PZbNMX Additionally, you can use style rules to keep images or description text within a certain size to make things easier to maintain.

Another possible solution is to use a script or jQuery plugin to allow for more dynamic uniform sizing, but I’m not as savvy with that stuff.

I ran into the same issue when trying to combine flex and Bootstrap using Safari, so I hope this helps.

Advertisements
This entry was posted in Cascade Style Sheet. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s