pie de página A veces persistente también se mueve durante la transición de página en jquery mobile

Este es el código html tengopie de página A veces persistente también se mueve durante la transición de página en jquery mobile

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
     <script> 
     $('#home, #page2, #page3').live('pagebeforeshow',function(event){ 
      $('#' + $(this).attr('id') + '_link').addClass('ui-btn-active'); 
     }); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Home Page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom" class="ui-btn-active" id="home_link">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page2"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Second page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid" class="ui-btn-active" id="page2_link">Second page</a></li> 
         <li><a href="#page3" data-icon="star">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
     <div data-role="page" id="page3"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       Third page 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#home" data-icon="custom">Home</a></li> 
         <li><a href="#page2" data-icon="grid">Second page</a></li> 
         <li><a href="#page3" data-icon="star" class="ui-btn-active" id="page3_link">Third page</a></li> 
        </ul> 
       </div> 
      </div>  
     </div> 
    </body> 
</html>

El problema que estoy enfrentando es que a veces cuando cambio la selección de barra de navegación, el pie de página también se desliza hacia la izquierda o junto con la página. Puede reproducir el problema cambiando constantemente la selección del botón en la barra de navegación.

Se puede ver aquí - http://jsfiddle.net/tKMgd/5/

Fuente

2011-07-06 user700284

Creo que la barra de desplazamiento vertical es la culpable. ¿Está siempre ahí? no estará allí en el dispositivo móvil, ¿lo has probado en el dispositivo? también, ¿has probado otras transiciones de página? – Tsar

Ocurre al azar. Algunas veces no ocurre del todo. No lo he probado en el dispositivo y no he probado otras transiciones. – user700284

También estoy teniendo este problema. ¿Encontraste alguna solución? – John

que no hice nada específico para resolver este problema.Pero a lo largo de la el momento en que el problema no está sucediendo. Entretanto he actualizado las versiones de JQM que he estado usando y ahora estoy usando JQM 1.1

Fuente

2012-05-07 12:32:30 user700284

Alguien discutido este problema y tenía una solución temporal, tal vez podría funcionar para usted también?

https://github.com/jquery/jquery-mobile/issues/2226

Extracto de respuesta

cuando se cambia rápidamente entre las páginas utilizando un pie de página persistente (con la mismos datos-id) el código fuente no se identifica de la página anterior pie de página. El problema ocurre debido a setTimeout (línea 5812 - jquery.mobile-1.0b2). Si cambia rápidamente entre las páginas, el pie de página no estará allí debido a la demora de 500ms. Si saca este setTimeout o lo establece en cero, este problema no vuelve a ocurrir, pero no estoy seguro de las consecuencias de esto.

que era capaz de reproducir este problema en Safari y iOS (no he probado otros dispositivos/navegadores)

Fuente

2012-01-05 01:29:16 John

Si el problema es con encabezado/pie de página, en lugar de usar data-position = "fixed" en su html simplemente establece la posición: fija en tu css y dale al elemento un alto índice z - viola, no más "parpadeando"

Fuente

2012-05-08 06:01:53

Up 1. Esto funcionó para mí . (jQuery Mobile 1.4.2) Experimenté el mismo problema al arrastrar a otro lado en la página. Tras la inspección del pie de página usando firebug, noté que jQuery agrega y elimina una clase llamada "ui-fixed-hidden". Esto parece causar el extraño parpadeo y, de hecho, se soluciona aplicando la respuesta sugerida. – Ideogram

pie de página A veces persistente también se mueve durante la transición de página en jquery mobile

Respuesta

Cuestiones relacionadas