javascript - framework - phonegap template html5
Android Webkit: los elementos posicionados de forma absoluta no respetan el índice z (8)
Pequeño insecto desagradable, este.
Como se ilustra en el ticket 6721 de Android , el navegador de Android parece no respetar el índice z cuando los elementos posicionados absolutamente se colocan sobre la parte superior de las etiquetas <a> o <input> . Estoy desesperado por cualquier tipo de solución. ¿Alguien ha conquistado este antes?
¡Gracias por adelantado!
Agregue esto al CSS de cada elemento que crea un problema:
-webkit-backface-visibility: hidden;
Coloque el html debajo de un div y configure la pantalla: ninguno usando javascript, entonces el contenido subido desaparece, en lugar de hacer clic y ser modal.
Este problema probablemente esté relacionado con los controles y que sean especiales para el navegador. Mientras observaba su problema (en cromo), encontré un problema relacionado que cuando presiona la tecla de tabulación, aún podrá enfocar los elementos de entrada. Probablemente tampoco quieras esto (sin importar el sangrado). La solución es sorprendentemente simple, usted escribe su script para agregar el atributo disabled a todas las entradas / botones / etc. Elementos que se superponen. Una entrada deshabilitada no podrá recibir el enfoque (con el teclado o de otro modo), y hacer clic en él debería ser imposible.
Como esto también desactiva la tonta circunnavegación del teclado, ni siquiera es una solución alternativa, sino un mejor diseño que también funciona con la navegación basada en el teclado como se esperaba.
IE tiene el mismo problema y la solución es asegurarse de que cada elemento involucrado en el posicionamiento e incluso sus contenedores tengan un índice z aplicado. Básicamente, si agrega un índice z a 1 elemento en el dom, IE entiende su posición z pero no entiende su posición z con respecto a lo que está al lado y / o más.
contenedor - índice z 0
niño (en el contenedor superior) - índice z 1
niño 2 (sobre todo) - índice z 999
Por supuesto, todo esto está basado en el IE estúpido, pero también vale la pena intentarlo en Android.
Segundo intento :)
No estoy familiarizado con el navegador de Android en absoluto, pero espero tal vez guiarlo por un camino para resolver su problema. Superfish es un menú de javascript que ha implementado una solución para los elementos del menú de índice z cuando se despliegan sobre los cuadros de selección en los navegadores. BgIframe es el js que usan para lograr esto. Tu respuesta puede estar ahí, con suerte.
Las correcciones anteriores para este problema para IE incluyen, pero probablemente no se limitan a la siguiente lista. Estos pueden ayudar a resolver el problema en Android para usted.
Pon un iframe detrás del contenido absoluto. El iframe puede oscurecer esos elementos para ti.
Cuando muestre su contenido absoluto, oculte todos los elementos problemáticos con JavaScript
Definir los div en el orden opuesto.
El punto número 1 se considera la solución más confiable para IE, pero puede que no sea la mejor solución para usted.
Para responder a la pregunta correctamente, es importante leer la página de errores. El problema no se trata de la visibilidad de la entrada a continuación, sino de su "posibilidad de hacer clic".
No puedo probarlo, pero estas son posibles soluciones:
0 Olvídese del posicionamiento absoluto y solo coloque dos divs allí y cambie la visibilidad.
Si esto no te satisface ...
Intento establecer la posición CSS en absoluta o relativa para todas las etiquetas a y de input (Sí, esto podría obligarte a reescribir CSS para mantener el diseño, pero ¿no vale la pena?)
2 hacer un contenedor de etiqueta <a> :
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
Esto necesitará algo más de CSS para que el contenido se vea bien. Pero espero que algo como esto solucione el problema.
si 1 y 2 no ayudan a probarlos a la vez;)
3 si sigue ocurriendo Es posible que desee verificar los detalles de lo que sucede cuando hace clic. Enlazar los eventos de hacer clic y mover el ratón para: link on top , container on top , input in the bottom y registrarlos. Si obtiene alguno de esos eventos para el enlace superior Puede intentar detener el burbujeo en algún momento o evitar el evento en la entrada de la parte inferior.
Esto sería difícil, pero puedo ayudar un poco. jQuery sería bastante necesario.
Si desea resolver este problema, en primer lugar debe agregar el índice z al envoltorio principal y agregar claramente el índice z a sus otros elementos, la solución es que todos los elementos tengan un punto cero para la correcta comprensión de la propiedad del índice z
Simular ENTRADA y A con DIVs.
[PSEUDO JQUERY CODE]
<div href="http://google.com" rel="a">Link</div>
<div class="field">
<div></div>
<input type="text" style="display: none" />
</div>
<script>
$(''div[rel=a]).click(function() {
location.href = $(this).attr(''href'');
});
$(''.field > div'').click(function() {
$(this).hide();
$(''.field > input'').show();
});
$(''.field > input'').blur(function() {
$(this).hide();
$(''.field > div'').html($(this).val()).show();
});
</script>