Safari display flex no funciona cuando los elementos son del 25% - twitter-bootstrap, safari, mobile-safari, flexbox

Tenemos un problema en iPads y Mac que es realmente molesto.

Estamos usando bootstrap, y hemos creado 9 elementos en una .row con clases .col-xs-12.col-sm-5.col-md-3.

En el .row hemos aplicado una clase .flex-start con el siguiente 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;
}

En safari, la primera fila flexible solo contiene 3 elementos.

Muestra aquí y captura de pantalla aquí. Debes abrir en safari en Mac o iPad

Establecer el ancho de col-md-3 en 24.9% corrige esto, pero no queremos que hackee.

¿Alguien más ha experimentado este problema y sabe de una solución?

Respuestas

Recientemente tuve el mismo problema. Hay un problema con el pseudo: después y: antes de los elementos que vienen con la clase de fila.

Creo que omitir la clase fila no es la mejor solución. En mi caso podría arreglarlo en safari con este css:

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

También puede echar un vistazo a esta publicación:

Error de Flexbox Safari (flex-wrap)

Simplemente agregue la clase "clearfix" a la fila y agregue "float: left;" Propiedad a todas las columnas dentro de la fila.

Esto funcionará bien en Safari.