Errores de renderizado CSS, ¬°sigue probando!

El otro d√≠a estaba creando un dise√Īo que solo estaba dirigido a navegadores modernos. ¬°Oh, la alegr√≠a de poder usar box-sizing: border-box;y todo lo dem√°s! Hasta que me encontr√© con algo que me dej√≥ alucinado.

Tomemos un html simple:

<div class="container">
<div class="content"></div>
</div>

Y algo de CSS simple:

.container {
position
: absolute;
top
: 0;
bottom
: 0;
width
: 100%;
height
: 100%;
padding
: 50px;
}

.content {
height
: 150%;
background
: #ff0000;
}

¬ŅQu√© crees que hace esto en tu navegador moderno habitual? Exactamente. Obtiene un buen contenedor, que tiene el ancho y alto completo de su navegador. Dentro de eso, obtienes un elemento de contenido que tiene un tama√Īo din√°mico y un espacio de 50px alrededor de todo el elemento debido al relleno generado por el contenedor. Deber√≠a verse algo como esto:

Imagen

Eso est√° perfectamente bien. Entonces, ¬Ņqu√© sucede cuando te desplazas hacia abajo? Esta:

Imagen

Eso tambi√©n est√° perfectamente bien. Pero, ¬Ņqu√© sucede cuando intenta hacer esto en la √ļltima versi√≥n de Firefox en Windows o Mac OS X? Esta:

Imagen

¬ŅQu√© carajo? Parece que Firefox todav√≠a no puede obtener algo tan b√°sico como el c√°lculo de relleno correctamente en elementos de tama√Īo din√°mico. Se descubri√≥ que este problema se puede reproducir en Windows y OS X, en las versiones 21 y 22. No he tenido tiempo de probarlo en otros navegadores. Pero me desconcert√≥ demasiado que un navegador moderno como Firefox todav√≠a tenga un error de representaci√≥n b√°sico como ese.

¬ŅY la soluci√≥n que pides? Aplique el contenido del contenedor en su lugar. (Dejamos el estilo del contenido sin cambios)bottom-paddingbottom-margin

.container {
position
: absolute;
top
: 0;
bottom
: 0;
width
: 100%;
height
: 100%;
padding
: 50px 50px 0;
}

.container :last-child {
margin
-bottom: 50px;
}

Entonces, ¬Ņcu√°l es el punto de todo esto? Todav√≠a hay muchos errores como estos que existen desde las primeras versiones de estos navegadores. Aunque ahora tenemos navegadores “modernos”, eso no significa que no tenga que probar todos y cada uno de ellos.