Se vienen cambios de apilado en los elementos position:fixed

Tom Wiltzius
Tom Wiltzius

En Chrome 22, el comportamiento del diseño de los elementos position:fixed es ligeramente diferente del de las versiones anteriores. Todos los elementos position:fixed ahora forman nuevos contextos de apilado. Esto cambiará el orden de apilado de algunas páginas, lo que puede dañar los diseños de página. El nuevo comportamiento coincide con el de los navegadores WebKit en dispositivos móviles (iOS Safari y Chrome para Android).

¿Apilar qué?

Todos conocen y aprecian el elemento z-index para determinar el orden de profundidad de los elementos de una página. Sin embargo, no todos los índices z se crean de la misma manera: el z-index de un elemento solo determina su orden en relación con otros elementos en el mismo contexto de apilado. La mayoría de los elementos de una página están en un contexto de apilamiento raíz único, pero los elementos posicionados de manera absoluta o relativa con valores z-index no automáticos forman sus propios contextos de pila (es decir, todos sus elementos secundarios se ordenarán en Z dentro del elemento superior y no se intercalarán con el contenido que no pertenezca al elemento superior). A partir de Chrome 22, los elementos position:fixed también crearán sus propios contextos de apilado.

Para obtener una descripción general sobre el apilado de contextos, este artículo de MDN es una buena lectura.

Compara position:fixed con el nuevo atributo position:sticky: a modo de referencia, position:sticky siempre crea un nuevo contexto de apilado.

Motivación

Los navegadores para dispositivos móviles (Mobile Safari, navegador Android, navegadores basados en Qt) colocan los elementos position:Fija en sus propios contextos de apilado y tienen durante algún tiempo (desde iOS5, Android Gingerbread, etc.) porque permite ciertas optimizaciones de desplazamiento, lo que hace que las páginas web sean mucho más receptivas al tacto. Este cambio se implementará en las computadoras de escritorio por tres motivos:

  1. Tener diferentes comportamientos de representación en los navegadores para dispositivos móviles y de escritorio es un obstáculo para los autores web; CSS debería funcionar igual en todas partes siempre que sea posible.
  2. En el caso de las tabletas, no está claro cuál de los algoritmos de creación de contexto de apilado para "dispositivos móviles" o "computadoras de escritorio" es el más adecuado.
  3. Llevar las optimizaciones del rendimiento del desplazamiento de los dispositivos móviles a la computadora de escritorio es bueno tanto para los usuarios como para los autores.

Aspectos específicos del cambio

Este es un ejemplo que muestra los diferentes comportamientos de diseño: https://codepen.io/paulirish/pen/CgAof

Con el cambio, ambas versiones se renderizarán como la versión para la derecha.

En este ejemplo, el cuadro verde tiene un z-index: 1, el cuadro rosa tiene un z-index: 3 y el cuadro naranja tiene una z-index: 2. El cuadro azul es el elemento principal del cuadro naranja y tiene position:fixed.

Si el cuadro azul tiene su propio contexto de apilado, el z-index del cuadro naranja se calcula en relación con el contexto de apilamiento del cuadro azul. Dado que el cuadro azul tiene un z-index de auto, lo que le da un nivel de apilado de cero en el contexto de apilado raíz, esto significa que el cuadro naranja termina detrás de los cuadros verdes y rosa, que tienen índices z de 1 y 3 (respectivamente) en el contexto raíz.

Si el cuadro azul no tiene su propio contexto de apilado, el z-index del cuadro naranja se calcula en relación con el contexto de apilado raíz (junto con los cuadros verde y rosa). Por lo tanto, el cuadro naranja termina intercalado con los cuadros rosa y verde.

Si deseas obtener más detalles sobre los criterios para la creación de contextos de apilado (y cómo se comportan los contextos de apilado en general), vuelve a consultar este artículo de MDN. En el ejemplo, la versión del lado derecho siempre le dio al cuadro azul su propio contexto de apilado porque su opacidad es menor que 1. El cambio de comportamiento que se realiza de forma efectiva agrega otro criterio para crear un contexto de apilado separado, es decir, un elemento en el que se fijan posiciones:fijo.

Pruebas y el futuro

Para probar si tu página va a cambiar, ve a about:flags de Chrome y activa o desactiva la opción "Los elementos de posición fija crean contextos de apilamiento". Si tu diseño se comporta de la misma manera en ambos casos, no tendrás problemas. De lo contrario, asegúrate de que te parezca aceptable con esa función experimental, ya que será la configuración predeterminada en Chrome 22.

Este cambio quita una capability: la capacidad de intercalar contenido dentro de un subárbol position: fixed con contenido sin desplazamiento desde el exterior Es poco probable que algún desarrollador web lo esté haciendo a propósito, y se puede crear el mismo efecto dando a varios elementos position:Fix para las diferentes partes del DOM. A modo de ejemplo, considera estos dos ejemplos:

https://codepen.io/wiltzius/pen/gcjCk

Esta página intenta tomar dos elementos div secundarios (superposiciónA y superposiciónB) de un elemento position:Fix y colocar uno encima de otro div de contenido y otro debajo de ese mismo div de contenido independiente. Ahora es imposible hacerlo porque el elemento position:fixed tiene su propio contexto de apilado y (junto con todos sus elementos secundarios) aparecerá por completo arriba o abajo del div de contenido. Tenga en cuenta que este ejemplo ya no funciona en Chrome 2, pero ya no funciona en Chrome 2.

Para solucionar este problema, las dos superposiciones se pueden dividir en su propia posición (elementos fijos). Cada uno es su propio contexto de apilado, uno de los cuales puede ir arriba del div de contenido y otro puede ir debajo de la div de contenido. Consulte el ejemplo corregido, que funciona en las versiones 21 y 22 de Chrome:

https://codepen.io/wiltzius/pen/vhFzG

El crédito de la génesis de este ejemplo va a la hixie inimitable.

Chrome es el primer navegador de escritorio que hace que los elementos position:Fix creen sus propios contextos de apilado. El estándar relevante es la especificación del índice z de CSS (p.ej., https://www.w3.org/TR/CSS21/zindex.html). Aún no existe un consenso sobre qué hacer con respecto a la diferencia entre los navegadores para dispositivos móviles y de escritorio, pero dada la confusión de tener dos comportamientos diferentes en los dispositivos móviles y las computadoras de escritorio, Chrome eligió cambiar a este único comportamiento en ambas plataformas por el momento.

Actualización del 1 de octubre de 2012: La versión original de este artículo sugería que la especificación z-index de CSS ya se había modificado para reflejar el nuevo comportamiento de la posición: elementos fijos. Esto es inexacto; se debatió en la lista de estilo www, pero, hasta el momento, no se realizó ningún cambio en la especificación.