Media Query non cambia CSS quando si ingrandisce il browser e si cambiano le schede

Question

Ecco un po 'di CSS che ha una semplice query multimediale.

http://codepen.io/anon/pen/nuxaw

Quando ridurre la pagina in modo che la porta di visualizzazione è inferiore a 320, il testo diventa verde. Ora se seguo questi passaggi, il browser verrà ingrandito, ma il CSS sarà ancora nello stato definito dalla query multimediale a 320px.

1. Con la pagina aperta nella prima scheda, e il browser dimensionato in modo che la query < 320px supporto è abilitato,
2. aprire una nuova scheda, individuare un sito web, come facebook.com.
3. Massimizza il browser.
4. Prendere una sessione di navigazione estesa dalla prima scheda. Non riattivare la prima scheda per alcuni minuti.
5. Attiva la prima scheda con la finestra ingrandita.
6. A questo punto, la porta di visualizzazione dovrebbe essere a schermo intero, ma l'elemento dovrebbe essere ancora il blocco verde.

Ciò significa che la query del supporto < 320 viene ancora applicata. Se apri il debugger, vedrai che il CSS applicato è il normale CSS. È un bug con Chrome?

http://imgur.com/a/TIAAi

Ecco un album su Imgur che mostra la sequenza.

1. Aperto, ingrandito.
2. Visualizzazione ridotta, query multimediale abilitata.
3. Massimizzato, continua a utilizzare la query multimediale.
4. Guardando il CSS, si dice che le dimensioni sono 300x200, ma l'interfaccia utente mostra 100x100. Qualcosa è rotto.

Answer 1

La soluzione per questo problema è convincere Chrome ad aggiornare il rendering sulla pagina. Puoi farlo ridimensionando, ingrandendo o modificando una classe sul tag del corpo. Ho aggiornato la codepen per utilizzare un evento visibilitychange che viene attivato durante il passaggio da una scheda all'altra per attivare una classe sul corpo per forzare Chrome ad aggiornare il rendering della pagina.

http://codepen.io/anon/pen/nuxaw