2011-12-29 8 views
8

Duplicar posible:
Mobile Webkit reflow issueIOS no puede hacer clic en los enlaces en el pie de página fijo hasta después del desplazamiento?

He estado tratando de resolver esto. Tengo un pie de página fijo en iOS con 4 enlaces. También hay 6 enlaces debajo de él que no deberían poder hacer clic, ya que están debajo. Sin embargo, en iOS, a menos que primero desplace la página, los enlaces del pie de página fijo no funcionarán y, en su lugar, hará clic en el enlace que se encuentra debajo. Después de desplazarse un poco, funciona bien. Espero haber explicado esto con suficiente claridad.

Se puede ver un ejemplo de ello aquí:
amstar.m77950.com
(vista en el iPhone)

he intentado aplicar z-index para básicamente cada elemento de la página para ver si hay fue una solución. También utilicé jquery para asegurarme de que el índice z se estaba aplicando en carga (aunque debería haber sido de todos modos).

Todavía no puedo conseguir que los enlaces en el pie de página funcionen hasta después de desplazarse por la página.

Cualquier ayuda sobre esto se aplicó mucho. Gracias.

Aquí es el css estoy solicitando al elemento:

cuestiones
.alertsBarClass { 
background: url("dynamicimage.aspx?id=21844") no-repeat scroll 0 0 #EA7E25; 
border-bottom: medium none; 
bottom: 0; 
display: block; 
position: fixed; 
width: 100%; 
z-index: 1000; 
} 
+0

¿Ha intentado aplicar una altura explícita a la barra? – canon

+0

Sí, lo intenté sin suerte todavía. Gracias por tu aporte. – busyPixels

+0

Solo IOS5 y superior admiten la posición: propiedad fija. –

Respuesta

1

No se conocen con position: fixed en IOS 5.1 y anclajes/enlaces y el desplazamiento. Vea el siguiente error # 10301184, # 10810232.

Una cosa que puede ayudar ... a veces ... es poner cursor: puntero en los divs que rodean sus enlaces.

+0

Estaba teniendo los mismos problemas, pero al agregar cursor: el puntero solucionó el problema ... por alguna razón. Esa es una solución realmente extraña. Pude aplicar esto a todo el encabezado de mi página (los enlaces en sí son de un niño de 5-6 niveles de profundidad). Dado que es para dispositivos móviles, el estilo del cursor probablemente no será notable. –

+0

Probablemente tu problema no era a lo que me refería aquí.Este es un error conocido que NO se soluciona añadiendo cursor: puntero. En un iPad o iPhone (dispositivos táctiles) los enlaces obtienen eventos táctiles, sin embargo, otras cosas como divs donde usa jQuery para adjuntar manejadores de clics NO OBTENDRÁN eventos táctiles a menos que le indique a iOS que puede tocarse agregando cursor: puntero. Con eso allí, obtendrás eventos táctiles. –

0

Tenía el mismo problema. Se solucionó al desplazarse hacia arriba y hacia abajo en el cambio de orientación mediante javascript.

que añade la siguiente secuencia de comandos para cada página, su fea pero funciona:

<script type=\"application/x-javascript\"> 
    addEventListener('load', function() { setTimeout(orientationChange, 0);}, false); 
    var currentWidth = 0; 
    function orientationChange() 
    { 
     if (window.innerWidth != currentWidth) 
     { 
      currentWidth = window.innerWidth; 
      var orient = (currentWidth == 320) ? \"profile\" : \"landscape\"; 
      window.scrollTo(0, 0); 
      setTimeout(function() {window.scrollTo(0, 1); }, 250); 
      document.body.setAttribute('orient', orient);    
     }   
    } 

    setInterval(orientationChange, 400);   
</script> 
Cuestiones relacionadas