Buenas tardes.
Mi problema es el siguiente: Tengo una web basada en gran parte en módulos de display 'flex'.
En Chrome, Firefox y Edge se ve perfectamente, ningún problema. Sin embargo, en Safari los elementos se apilan como si fueran divs sin ningún display aplicado.
He buscado bastante en internet y veo que es un problema común, sin embargo, me cuesta encontrar una solución que se aplique a mi caso.
En principio había escrito el código a mano pero visto que lo recomendaban por ahí bajé Autoprefix para Sublime Text, y la verdad que eso me ayudó a estabilizarlo en Firefox y Edge, pero no en Safari que sigue exactamente igual.
Pongo un ejemplo de código:
Código CSS:
Ver original#container > section{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
position: relative;
}
Esto genera unos bloques ordenados horizontalmente en todos los navegadores menos Safari, que los apila unos encima de otros.
Muchas gracias por vuestra ayuda