El código Flexbox funciona en todos los navegadores excepto Safari. ¿Por qué?

Columnas de cuadrícula con etiquetas de lista, necesito mostrarlas en el orden correcto cada 3 columnas, con el ancho automático habilitado para cada elemento de lista HTML adicional.

Este es mi ejemplo:

 <style>
        ul {
            margin: 0;
            padding: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            height: 150px;
            width:auto;
        }
    
        li {
            float: left;
            display: inline-block;
            list-style: none;
            position: relative;
            height: 50px;
            width: 50px;
        }
    </style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>

Expandir fragmento

Esto es lo que he probado hasta ahora y funciona absolutamente bien en todos los demás navegadores, pero no es compatible con el navegador Safari a menos que agregue esto: display: -webkit-flex;.

Quiero convertir la salida de esta manera:

1 4 7 10
2 5 8 11
3 6 9 12

Es importante que esto funcione para el navegador Safari. Hasta ahora parece que no puedo resolver este problema en absoluto, agradecería cualquier ayuda :)

Enlace de prueba:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Feb 02 '16 00:02 rafcastro77

Flexbox es una tecnología CSS3. Esto significa que es relativamente nuevo y que algunos navegadores no brindan soporte completo para las propiedades flexibles.

Aquí hay un resumen:

IE 8 y 9 no son compatibles con Flexbox. Si desea utilizar propiedades flexibles en estos navegadores, no se moleste en perder el tiempo. Un polyfill de flexbox estuvo circulando por un tiempo, pero no funcionó bien y ya no se le da mantenimiento.
IE 10 admite una versión anterior de flexbox y requiere prefijos de proveedor . Tenga en cuenta que ciertas propiedades de la especificación actual no son compatibles con IE10 (como flex-growy flex-shrink) flex-basis. Consulte el índice de propiedades de Flexbox 2012 .
IE 11 es bueno, pero tiene errores. Se basa en el estándar flexbox actual . Consulte la pestaña PROBLEMAS CONOCIDOS en esta página para conocer algunos de los problemas. Ver también: la propiedad flexible no funciona en IE
Con Chrome, Firefox y Edge estás bien en todos lados. Encontrará errores menores e inconsistencias, pero generalmente hay soluciones fáciles. Deberá tener en cuenta el tamaño flexible mínimo implícito , que a veces causa problemas de tamaño y barra de desplazamiento.
Las versiones 9 y posteriores de Safari admiten la especificación actual de flexbox sin prefijos. Sin embargo, las versiones anteriores de Safari requieren -webkit-prefijos. En ocasiones min-widthprovocan max-widthproblemas de alineación que pueden resolverse con flexequivalentes. Ver elementos Flex que no se apilan correctamente en Safari

Para obtener una revisión completa de la compatibilidad del navegador Flexbox, consulte esta página: http://caniuse.com/#search=flex

Para obtener una forma rápida de agregar muchos (pero no necesariamente todos) prefijos de proveedores, utilice Autoprefixer . Para Safari, consulte este artículo para conocer -webkit-los prefijos que algunos generadores de prefijos no incluyen.

Para obtener una lista de errores flexibles comunes y sus soluciones, consulte Flexbugs .

Además, en este sitio, hay:

Información de la etiqueta Flexbox

Feb 01 '2016 18:02 Michael Benjamin

A mí me funciona mostrar: -webkit-inline-box; en safari.

Aug 28 '2017 10:08 saravana va