Interruzioni di posizionamento fisse CSS in Chrome dopo -webkit-translate

Question

Sto creando una pagina Web basata sul responsive web design. Quindi, quando viene ridimensionato a una risoluzione più piccola, il menu di navigazione verrà rimosso dalla barra in alto e trasformato in un menu scorrevole mobile per iPhone/percorso per iPhone. L'ho raggiunto usando la libreria this.

Allo stesso tempo, ho un pannello di posizionamento fisso nella parte inferiore, che può essere tirato su e giù, ancorato nella parte inferiore della pagina. È molto vicino a this, solo che il mio è in fondo e può essere tirato su.

Ecco il problema in Chrome: quando faccio scorrere il menu del dispositivo mobile e lo faccio scorrere di nuovo (sta usando "-webkit-transform: translateX()"), il pannello posizionato in posizione fissa si rompe.

Dopo un po 'di ricerca, sembra essere a bug in Chrome. Tuttavia, c'è una soluzione alternativa?

Eventuali duplicati: Positions fixed doesn't work when using -webkit-transform (non ho trovato alcuna soluzione per il mio problema nella risposta però)

Grazie mille!

Answer 1

Puoi seguire questa violino

http://jsfiddle.net/stefanoortisi/DvZn2/1/

E 'davvero semplice e pulito. Puoi iniziare a seguire la stessa struttura.

Nota: l'elemento fisso per qualche motivo deve avere uno z-index:

#topbar 
    position: fixed 
    z-index: 1