In Chrome 22, il comportamento del layout degli elementi position:fixed è leggermente diverso rispetto alle versioni precedenti. Tutti gli elementi position:fixed ora formano nuovi contesti di impilamento. Questa operazione modificherà l'ordine di sovrapposizione di alcune pagine, il che potrebbe causare interruzioni dei layout delle pagine. Il nuovo comportamento corrisponde a quello dei browser WebKit sui dispositivi mobili (iOS Safari e Chrome per Android).
Impilare che cos'è?
Tutti conoscono e amano z-index per determinare l'ordine in profondità degli elementi su una pagina. Tuttavia, non tutti gli z-index sono uguali: il valore z-index di un elemento determina solo il suo ordinamento rispetto ad altri elementi nello stesso contesto di stack. La maggior parte degli elementi di una pagina si trova in un unico contesto di stack principale, ma gli elementi posizionati in modo assolutamente o relativamente posizionato con valori z-index non automatici formano i propri contesti di stack (in altre parole, tutti gli elementi secondari saranno in ordine z all'interno dell'elemento principale e non verranno interlacciati con contenuti esterni a quello principale). A partire da Chrome 22, anche gli elementi position:fixed creeranno i propri contesti di impilamento.
Per una panoramica generale dello stack dei contesti, ti consigliamo di leggere questo articolo su MDN.
Confronta position:fixed con il nuovo attributo position:sticky: come riferimento, position:sticky crea sempre un nuovo contesto di stacking.
Motivazione
I browser per dispositivi mobili (Safari per dispositivi mobili, browser Android, browser basati su Qt) mettono position:elementi fissi nei propri contesti di sovrapposizione e lo fanno da tempo (da iOS5, Android Gingerbread e così via) perché consentono alcune ottimizzazioni dello scorrimento, rendendo le pagine web molto più reattive al tocco. Questa modifica verrà applicata ai computer per tre motivi:
- Avere un comportamento di rendering diverso sui browser "mobile" e "desktop" è un ostacolo per gli autori di contenuti web; se possibile, CSS dovrebbe funzionare ovunque.
- Sui tablet, non è chiaro quale sia gli algoritmi di creazione del contesto impilati per "dispositivi mobili" o "desktop" sia più appropriato.
- Ottimizzare il rendimento dello scorrimento dai dispositivi mobili ai computer è vantaggioso sia per gli utenti che per gli autori.
Specifiche della modifica
Ecco un esempio che mostra i diversi comportamenti del layout: https://codepen.io/paulirish/pen/CgAof
Con la modifica, entrambe le versioni verranno visualizzate come quella di destra.
In questo esempio, la casella verde ha un z-index: 1, la casella rosa ha un z-index: 3 e la casella arancione ha un z-index: 2. La casella blu è un predecessore della casella arancione e ha position:fixed.
Se la casella blu riceve il proprio contesto di impilamento, il valore z-index della casella arancione viene calcolato in base al contesto di impilamento della casella blu. Poiché la casella blu ha un z-index di auto, assegnandogli un livello di impilamento pari a zero nel contesto di impilamento della radice, ciò significa che la casella arancione termina dietro le caselle verdi e rosa, che hanno rispettivamente z-index pari a 1 e 3 nel contesto della radice.
Se la casella blu non ha un proprio contesto di stack, il valore z-index della casella arancione viene calcolato in base al contesto di stack principale (insieme alle caselle verdi e rosa). Il riquadro arancione termina quindi interleaving con quelli rosa e verdi.
Per ulteriori dettagli sui criteri per la creazione di contesti di stack (e sul comportamento di questi ultimi in generale), consulta nuovamente questo articolo su MDN. Nell'esempio, la versione sul lato destro ha sempre fornito alla casella blu il proprio contesto di stack perché la sua opacità è inferiore a 1. La modifica del comportamento effettiva aggiunge un altro criterio per creare un contesto di stack separato, ovvero un elemento position:fix.
Test e il futuro
Per verificare se la tua pagina verrà modificata, vai a about:flags di Chrome e attiva/disattiva "Gli elementi in posizione fissa creano contesti di impilamento". Se il layout si comporta allo stesso modo in entrambi i casi, è tutto a posto. In caso contrario, assicurati che l'impostazione sia accettabile con il flag abilitato, poiché sarà l'impostazione predefinita in Chrome 22.
Questa modifica rimuove una funzionalità: la possibilità di interlacciare i contenuti all'interno di un sottoalbero position:fixed con contenuti che non scorrono dall'esterno. È improbabile che uno sviluppatore web lo faccia di proposito e lo stesso effetto può essere creato assegnando a più elementi position:fissi le diverse parti del DOM. Ad esempio, considera questi due esempi:
https://codepen.io/wiltzius/pen/gcjCk
Questa pagina tenta di prendere due div secondari (overlayA e overlayB) di un elemento position:fixed e posizionane uno sopra un div di contenuto separato e uno sotto lo stesso div di contenuti separato. Non è possibile farlo perché l'elemento position:fixed è il suo contesto di stack e questo (insieme a tutti i suoi elementi secondari) sarà interamente sopra o completamente sotto il div di contenuti. Tieni presente che in Chrome 2 questo esempio non funziona più in Chrome 2.
Per risolvere il problema, i due overlay possono essere suddivisi nella rispettiva posizione:elementi fissi. Ciascuno è il proprio contesto di stack, uno dei quali può essere posizionato sopra il div dei contenuti e uno dei quali può essere posizionato sotto il div dei contenuti. Guarda l'esempio fisso, che funziona in Chrome 21 e 22:
https://codepen.io/wiltzius/pen/vhFzG
Il merito della genesi di questo esempio va all'inimitabile hixie.
Chrome è il primo browser desktop a far sì che gli elementi position:fixed creino contesti di impilamento personalizzati. Lo standard pertinente è la specifica z-index del CSS (ad es. https://www.w3.org/TR/CSS21/zindex.html). Non c'è ancora un accordo su cosa fare in merito alla differenza tra browser per dispositivi mobili e desktop in questo caso, ma data la confusione dovuta alla presenza di due diversi comportamenti sui dispositivi mobili e sui computer desktop, per il momento Chrome ha scelto di adottare questo unico comportamento su entrambe le piattaforme.
Aggiornamento del 1° ottobre 2012:la versione originale di questo articolo suggeriva che la specifica CSS z-index era già stata modificata per riflettere il nuovo comportamento della posizione: elementi fissi. Questa informazione non è precisa; è stata discussa nell'elenco in stile www, ma ancora non sono state apportate modifiche alle specifiche.