Posizione CSS Android: fissa dopo la rotazione di un dispositivo

Ho un bug molto insolito che appare sul mio Android 4.0 su Galaxy Note. Alcuni amici vedono lo stesso sul loro Galaxy S3. Ho semplificato il mio codice al seguente:Posizione CSS Android: fissa dopo la rotazione di un dispositivo

<!DOCTYPE html> 
<html> 
     <head> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
       <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
     #movieplayer {width:100%; position:fixed; top:0px; left:0px; right:0px; bottom:0; background:yellow; z-index: 90;} 
     .player, .project-info {width:100%} 
     #movieplayer .short-info {width:100%;background:green;display:block;position:relative;} 

     </style> 

     </head> 

     <body class="works"> 
     <div id="global-container"> 

       <div id="movieplayer"> 
         <div class="player"> 
           <div class="project-info movie"> 
             <div class="short-info jspScrollable"> 
               <div class="container"> 
                 hello 
               </div> 
             </div> 
           </div> 
         </div> 

       </div> 

     </div> 
     </body> 
</html>

prima volta che si carica il pagina in RITRATTO, si dovrebbe vedere una barra verde in cima a uno sfondo giallo. Entrambi riempiono la larghezza dello schermo al 100%. Quando si ruota il telefono in orizzontale, il giallo continua a riempire il resto dello schermo, ma la barra verde non riesce a riempire la larghezza rimanente. Perchè è questo?

Sto usando #movieplayer {position: fixed;} qui perché nel mio codice reale, mi baso su quello per fare altre cose. Quindi non posso usare la posizione: assoluta.

fonte

2013-04-24 John

OK, sono stato in grado di hackerare una soluzione insieme. Ho installato jquery, e poi ho fatto uno

$('.short-info').css('position','absolute'); 
setTimeout("$('.short-info').css('position','');", 0);

Questo è brutto, ma funziona.

fonte

2013-04-24 20:16:41 John

L'altra risposta è modo migliore e funziona! – Adaptabi

Risolto il problema per me. –

Questo problema sembra un bug in alcune versioni del browser Android.

L'insieme di elementi sotto il contenitore di posizione fissa non viene chiesto di ricalcolare la loro larghezza (durante reflow) come risultato dell'evento di ridimensionamento.

La soluzione funziona, poiché è uno di several ways per forzare questo ricalcolo.

Stranamente, abbiamo scoperto che qualsiasi query multimediale specifica per il paesaggio in css la risolve per noi. (testato su Galaxy S3):

@media screen and (orientation: landscape){ 
    .doesnt-exist { background:red; } 
}

Link correlati: Android Issue 27959 Android Issue (dup) 25610

fonte

2013-04-29 07:46:56

Posizione CSS Android: fissa dopo la rotazione di un dispositivo

risposta

Problemi correlati