2011-11-28 20 views
5

Sto lavorando su questo progetto per lavoro in cui un e-learning sarà riprodotto sulla scheda della galassia samsung. il gioco è solo un sito web ma verrà mostrato come app.Z-index non funziona sulla scheda Samsung Galaxy?

Quando accedi per la prima volta vedrai un popup con questo messaggio di benvenuto, dietro c'è una sovrapposizione di nero con trasparenza.

Il problema è che sul PC mentre su Firefox tutto funziona alla grande ma sul tablet l'indice Z non sembra funzionare. è impossibile eseguire il debug e non sono riuscito a trovare alcuna documentazione su questo problema. Quindi qualcuno sa se z-index funziona diversamente sul tablet o come lo risolvo?

Il pop-up ha z-index 999 e l'overlay è z-index 998, Qualche idea su questo? Continuerò la mia ricerca su google e posterò tutti i progressi che faccio.

Edit: La sovrapposizione verrà creato in Jquery: var ShowPopup = '% <% = Viewdata ("ShowPopup") toString()>'

if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); } 

ora risolto, vedi commento per soluzione .

+0

trovato la risposta, la risposta è stata parzialmente su StackOverflow può essere trovato qui: http: //stackoverflow.com/questions/2562206/android-webkit-absolutely-positioned-elements-dont-respect-z-index Il il resto è stato trovato in un tutorial. La soluzione era la seguente: Ho aggiunto l'overlay in jQuery ma il pop-up era in html ma appena nascosto. quindi ho aggiunto quella parte del codice anche al controllo jQuery. Per evitare che il pop-up erediti l'opacità dell'overlay ho dovuto usare di nuovo '$ ('body'). Tutto funziona ora. dovuto inserire qui poiché non mi è stato permesso di rispondere ancora alle mie domande :( –

+0

pubblicherò la soluzione sopra come risposta in 6 ore quando posso ^^ –

risposta

0

trovato la risposta, la risposta era parzialmente StackOverflow può essere trovato qui: Android Webkit: Absolutely positioned elements don't respect z-index

Il resto è stato trovato in un tutorial.

La soluzione è stata la seguente:

ho aggiunto la sovrapposizione in jQuery ma il pop-up è stato in html, ma solo nascosto. così ho aggiunto quella parte del codice anche al controllo jQuery. Per evitare che il pop-up erediti l'opacità dell'overlay ho dovuto usare di nuovo lo $('body').prepend. Funziona tutto ora.

+0

Grazie per la modifica :) –

9

In ritardo per la festa ma, ho trovato la soluzione migliore per questo era aggiungere -webkit-transform: translate3d (0,0,0); all'oggetto che è posizionato in modo assoluto e z-indexed. Ha risolto il mio problema ogni volta.

+0

Questo ha funzionato per me con Samsung Galaxy S2 con Android 4.0.4 – Giorgio

+0

Lavoro fantastico! questo stava facendo il mio dado! Avrei +50 se potessi! –

Problemi correlati