Espacio en blanco autogenerado en Chrome con multicolumnas

[twilvaro]

Estoy desarrollando una plantilla en la que en uno de los apartados voy a utilizar el modo multicolumnas de CSS3.

Contenedor:

Código:

#ultimas {
    margin-top: 15px;
    -webkit-column-count: 2;
    -webkit-column-gap: 15px;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 15px;
    -moz-column-fill: balance;
    column-count: 2;
    column-gap: 15px;
    column-fill: auto;
}

Artículos (hijos):

Código:

#ultimas article {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid-column;
    display: inline-block;
}

Teóricamente el problema lo tendría en Firefox, que no hace funcionar correctamente column-break-inside: avoid;, sin embargo al añadirle display: inline-block; parece solventar el problema. Al menos, por ahora he probado añadiendo textos de distintas longitudes y lo representa bien. Es más, lo hace mejor que Chrome; y he aquí el problema.

En Chrome (y en IE10) me añade en la parte inferior del contenedor un espacio en blanco que no tiene sentido. Ni es padding, ni es margin. Es fruto de añadir column-break-inside: avoid. Desde el inspector, cuando desactivo avoid desaparece el espacio, y lo mismo si lo comento en el código y guardo para ver el resultado.

No le encuentro explicación, porque además si lo hago tal cual en jsFiddle no pasa, es decir que pasa en la plantilla que estoy haciendo. No sé si porque hereda algo...

He probado con añadirle white-space: nowgrap, pre y pre-grap, pero tampoco.

Les dejo una imagen:



Y también el proyecto subido, para que le echen un vistazo al código a ver si saben dar con el error. Estoy desarrollándolo en mobile-first, por lo que necesitan reducir la ventana del navegador para visualizar correctamente.

http://arodriguez.cc/MAYA/index.html

Podría dividirlo en dos divs y al carajo, pero le quitaría el dinamismo que ofrecen las multicolumnas, más teniendo en cuenta que tengo pensado adaptarlo a WP. Tampoco pretendo hacerlo en JS, porque meter una librería para 4 entradas que voy a representar en columnas tampoco lo veo muy óptimo.

En fin, espero que puedan ayudarme. Gracias de antemano.

Un cordial saludo!

[pzin]

Estoy en la tableta ahora mismo y no puedo mirar bien el asunto. Pero por lo que comentas, suena muy a efecto secundario del inline-block. Aunque ya digo que es lo primero que me viene a la cabeza sólo leyendo el problema.

Luego en el ordenar lo miro más al detalle a ver qué podría ser.

[pzin]

Añadiendo una grilla al contenedor se puede ver que son las columnas de por si que añaden ese espacio:

Código CSS:

-webkit-column-rule: 1px solid red;
 

Por alguna razón las columnas se estiran creando ese espacio. Si le pones a article una posición relativa y un top: -100px lo ves más claro aún.

No sé si tal vez algo así podrían ayudar:

Código CSS:

article > * {
  display: block;
}
 

La verdad es que nunca trabajé con columnas.

[twilvaro]

Muchas gracias por la ayuda pzin. Pues al final desistí y le metí dos divs, porque además lo volví a probar en jsFiddle y ya sí que generaba ese espacio, por lo que me quedó claro que es el column-break-inside lo que genera ese espacio en blanco (no sé cómo lo probé la anterior vez que no me pasó, supongo que las prisas no son buenas jeje).

Aquí te lo dejo: http://jsfiddle.net/twilvaro/QMscy/.

Los column-break-inside están comentados, al descomentarlos verás que aparece el espacio vacío.

Es una lástima, porque si no fuese por esto sería una maravilla.