He estado experimentando un problema en las versiones móviles de webkit (específicamente Webkit 534.46 en iOS 5.1.1 como Safari móvil y ahora Chrome para iOS) que no ocurre en ningún navegador de escritorio que yo ' Has visto. (es decir, los demos continuación deben considerarse en una versión móvil de webkit.)Problema de reflujo de Mobile Webkit
Here is a live example of the issue. El núcleo de la CSS es extremadamente sencillo. Se posiciona un índice alfabeto a lo largo de la izquierda de la página:
#index {
left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}
El problema ocurre cuando un elemento es de posición fija sobre la parte superior del cuerpo. Se puede interactuar completamente hasta que el desplazamiento cambie y luego deje de aceptar la entrada. Si yo (manualmente) sacude el desplazamiento incluso un píxel, se vuelve a activar. El ejemplo se mantuvo lo más simple posible y no utiliza ningún JavaScript. Después de aporrearlo realmente, descubrí que parece que el elemento cree que está desplazado pero que ha sido reparado visualmente. En otras palabras, si hace clic en 'A', intente hacer clic nuevamente en 'A', a veces obtendrá un segundo clic, pero estará más abajo en la lista. Esto me pareció un problema de reflujo de CSS. Sé que el webkit móvil intenta reducir el número de reflows.
Here is a live example of the workaround.
Puedo usar JS para forzar el CSS de todo el documento vuelva a fluir el desplazamiento (con un acelerador que evita que suceda hasta 100 ms después del desplazamiento) que parece solucionar este problema en el sencillo ejemplo. Desafortunadamente, esto no ayuda a la versión de este problema en el mundo real.
This is the code for the issue page and the workaround script.
Mi pregunta es lo que está sucediendo aquí y hay una solución CSS que me falta? Específicamente, tengo curiosidad por saber si algún gurú de CSS puede averiguar cuál es la situación del diseño que impide que los clics lleguen al lugar correcto en el elemento fijo. Una mejor comprensión podría ayudar a encontrar una solución real.
Edit: Olvidé mencionar que el ejemplo obliga explícitamente a la ventana gráfica al tamaño de la ventana. Por lo tanto, el usuario no puede acercar/alejar, lo que significa que la posición: fija debe anclar el elemento en el lado izquierdo de la ventana.
Actualización (20/09/2012): Esto parece estar fijo en Safari Mobile en iOS 6 (así como UIWebView). Cualquier solución debe primero comprobar para asegurarse de que está en IOS < 6. Por ejemplo, el uso de CssUserAgent este sería el resultado:
if (parseFloat(cssua.ua.ios) < 6) { /* ... */ }
Todavía estoy repasando las diversas soluciones en las dos respuestas para encontrar el "mejor". Les di a ambos un +1 para los enlaces. Otorgaré la recompensa a lo que arregle mi problema. ¡Gracias! – mckamey
Todavía estoy buscando una solución que funcione en mi caso particular, pero la ventana de recompensas se está acabando, así que se lo adjudicaré a @Paul Sweatte ya que él respondió primero y sus enlaces tienen más variaciones de solución. ¡Gracias a todos! – mckamey