We have an issue on iPads and Mac thats we really annoying.
We are using bootstrap, and have created 9 elements in a .row with .col-xs-12.col-sm-5.col-md-3 classes.
On the .row we have applied a .flex-start class with the following css:
.flex-start {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
In safari the first flex row only contains 3 items.
Sample here and screenshot here. you must open in safari on Mac or iPad
Setting the width of col-md-3 to 24.9% fixes this, but we dont want that hack.
Has anyone else experienced this issue, and know of a fix?
I recently had the same issue. There is a problem with the pseudo :after and :before elements which comes with the row class.
I think omittig the row class is not the best solution. In my case i could fix it in safari with this css:
.row:before,
.row:after {
display: none;
}
You might also have a look at this post:
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments