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:
Eso está perfectamente bien. Entonces, ¿qué sucede cuando te desplazas hacia abajo? Esta:
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:
¿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.