CSS: posizione: fissa all'interno della posizione: assoluta

Question

Sto correndo in alcuni comportamenti estremamente strani e non coerenti su tutti i browser che ho testato.

Sono un layout piuttosto complessa, ma il problema principale si trova qui:

<div id="drop"> 
    <div id="header"></div> 
</div> 

#drop ha position:absolute e z-index:100
#header ha position:fixed; top:60px;

Mentre inizio scorrendo verso il basso Chrome ignora la regola position:fixed . Se rimuovo dei due stili precedenti da #drop, , Chrome inizia a rispettare la regola position:fixed.

non riesco a farlo funzionare su Ubuntu Chrome 23.0.1271.97 e vedere lo stesso comportamento su Mac Chrome 25.0.1364.99. Il mio amico utilizza Ubuntu Chrome 25.0.1364.68 beta e funziona correttamente per lui. L'ho provato su Firefox e funziona un po '(con altri sintomi)

Qualcuno ha mai sentito parlare di questo errore? o qualcuno può persino riprodurlo?

modificare

sto usando OpenLayers mappa come un altro div con position:fixed se elimino quel livello o almeno cambiare a display:none allora questo strano bug va via.

modificare

notato che durante la presenza di questo bug, se cambio il livello di zoom avanti e indietro, allora la posizione si adatta al comportamento corretto. Per me, questo indica un problema di webkit che non riesce ad eseguire alcune funzioni di callback interne sullo scroll.

Un'altra cosa estremamente strana è che ho alcuni collegamenti all'interno di #header e funzionano se faccio semplicemente clic sulla posizione prevista, anche se il div non appare lì. Complessivamente Ho notato che è solo il rendering che è rotto. Se in qualsiasi momento costringo il re-rendering del browser ridimensionando la finestra, o cambiando lo zoom, o semplicemente facendo Select-All, la barra dell'intestazione salta alla posizione corretta, ma non rimane fissa.

Answer 1

Prima di tutto, inserisci qualcosa nel tuo div perché i comportamenti vuoti si comportano in modo strano. Quindi, cosa ti aspetti mettendo uno fixed in un absolute? Ovviamente, nessuno sa qual è il punto di riferimento del tuo div fixed. Dovrebbe essere la posizione dei suoi genitori? che non sta cambiando con lo scroll o la posizione della pagina che cambia? Prova ad usare cose che sono completamente significative e hanno una definizione chiara perché se la aggiusti in chrome, cosa accadrebbe con un altro browser? Preferisci davvero testare su tutti loro?

suppongo un piccolo cambiamento nella vostra div s in modo che tirare le fixed div fuori dalla absolute una o spostare i absolute div da qualche altra parte.

Answer 2

È necessario posizionare header all'esterno del contenitore genitore drop per farlo funzionare.

Ho avuto problemi leggermente simili giorni indietro.Ad esempio, se si imposta z-index di header, sarà possibile raggiungere l'indice z del contenitore genitore drop. L'indice z di header sarà inutile perché è già all'interno di un contenitore che ha un altro z-index.

La stessa logica di z-index si applica alla posizione.

Answer 3

Hai menzionato nei commenti che OpenLayers utilizza le trasformazioni CSS. Stando così le cose:

l'elemento con posizionamento fisso diventerà rispetto all'elemento con la trasformazione - non relativo alla viewport

Date un'occhiata a spec: The Transform Rendering Model

Specifica un valore diverso da 'none' per la proprietà 'transform' stabilisce un nuovo sistema di coordinate locale sull'elemento a cui è applicato .

Guardate questa FIDDLE in un browser webkit per vedere questo in azione

<div class="wpr"> 
    <div class="fixed"></div> 
</div> 

.wpr 
{ 
    width: 200px; 
    height:1000px; 
    background: pink; 
    position:relative; 
    margin: 0 200px; 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
} 
.fixed 
{ 
    width: 200px; 
    height:200px; 
    margin: 50px; 
    position: fixed;  
    top:0; 
    left:0; 
    background: aqua; 
} 

Answer 4

Voglio aggiungere un'altra soluzione possibile, perché ero alle prese con Chrome posizione ignorare: fissa per un bel po 'di tempo fino a quando ho finalmente trovato il colpevole:

Veniva da un plug-in che stavo usando e causa TUTTA la posizione: elementi fissi da ignorare. Spero che aiuti qualcuno.

Answer 5

Come dice la risposta accettata, questo è il comportamento previsto ed è conforme alle specifiche. Un altro componente importante di questo è ciò che significa usare le trasformazioni CSS.

Nel tuo caso, era dovuto a OpenLayers, ma questo vale per chiunque usi lo will-change: transform (probabilmente molte persone che stanno visitando questa domanda). Questo è stato rilevato sul bug tracker Chromium here e contrassegnato come WontFix, perché (come ho detto) è il comportamento previsto. Il commento ufficiale è questo:

Questo comportamento è richiesto dalle specifiche (http://dev.w3.org/csswg/css-will-change/): "Se un valore non iniziale di una proprietà causerebbe l'elemento per generare un blocco contenente per elementi a posizione fissa , specificando che la proprietà in will-change deve far sì che l'elemento generi un blocco contenitore per gli elementi di posizione fissa ".

L'idea è che una volta che sarà cambiamento: trasformare è specificato, si dovrebbe essere in grado di aggiungere/rimuovere/cambio trasforma a buon mercato, senza bisogno discendenti in posizione fissa per ottenere ri-layed-out.

Si noti che l'uso di altri valori di cambio di volontà (ad esempio opacità, in alto) corrisponderà a senza modificare il posizionamento dei discendenti a posizione fissa.

Per quanto ne so, l'unica soluzione è quella di rendere il bambino dell'elemento will-change un fratello invece, per evitare che l'attributo da cascata.

Come nota a margine, nel mio caso specifico, sono stato in grado di risolverlo essendo più specifico con l'attributo will-change. Invece di usarlo sullo div contenente l'elemento jar di performance che richiedeva la offload della GPU, l'ho usato direttamente sull'elemento offendente. Ciò era dovuto al mio codice cattivo originale, tuttavia, quindi non funzionerà nella maggior parte dei casi.