¿Hay alguna solución para la falla del navegador Android con CSS-Position y áreas seleccionables?

Cuando tiene algún contenido cliqueable como <a>, <input> o <area> y antes de esto tiene un elemento absolutamente posicionado con un índice z más grande, existe un comportamiento incorrecto de 'clic'.
Hago clic en el área donde se encuentra el elemento que se puede hacer clic detrás del elemento frontal. En otros navegadores existe el comportamiento correcto de que el clic no pasa por el elemento frontal. Pero solo en el navegador de Android puede hacer clic en el elemento frontal y activar el elemento de atrás. Este es un error conocido y no puedes evitarlo. Incluso está en versiones más nuevas (lo pruebo en 2.3.3 en el emulador oficial de Android).¿Hay alguna solución para la falla del navegador Android con CSS-Position y áreas seleccionables?

Existen algunas soluciones alternativas que se describen en algunos foros, pero ninguna de ellas me funcionó.

Traté de poner o un <a> entre la parte delantera y trasera
He intentado cambiar el DOM así que tal vez el estado de los navegadores se actualiza
traté de tener los elementos de espalda pueden colocar así Ninguno funcionó

Tengo problemas especialmente con los elementos de área del mapa de imagen.

¿Alguien ha tenido el mismo problema y ha logrado solucionarlo? Estoy específicamente interesado en soluciones que se prueban contra mapas de imágenes.

Fuente

2012-01-17 HerrSerker

Si se sabe que el error ocurre solo en el navegador de Android y tiene una solución para todos los demás casos, ¿puede configurar un oyente de clic en el elemento no cliqueable, leer el agente de usuario y reaccionar adecuadamente? Tal vez esto no tenga sentido, pero lo del agente de usuario podría ser útil – Maragues

@Maragues Idea interesante, pero no funcionará, porque el elemento de la parte posterior que carece del evento de clic no sabrá qué elemento de delante debería se ha hecho clic en primer lugar. – HerrSerker

si el elemento en la parte posterior siempre se coloca en la misma área, quizás podría leer las coordenadas del clic y, a través de algunos cálculos teniendo en cuenta el tamaño y la densidad de la pantalla, deducir si los clics fueron para el elemento frontal. Sé que es una solución horrible, pero puede funcionar como un movimiento desesperado. – Maragues

Esta es una respuesta rápida con los ojos vendados, así que avíseme si debo expandirla/corregirla más. La idea general es una clase CSS para los eventos de desplazamiento y foco que deshabilitan la interacción del puntero.

yourElementClass:focus, yourElementClass:hover { 
    pointer-events: none; 
}

Fuente

2012-11-26 14:25:48 mystrdat

¿qué elemento debería tener esta regla? ¿El de la parte posterior en el que se puede hacer clic, pero no debería serlo, o el que está en el frente, en el que no se puede hacer clic, pero que debería serlo? – HerrSerker

Esto puede funcionar. No tengo tiempo ahora para probar esto más, pero en Element Inscpector de Chrome me di cuenta de que 'pointer-events' debe ser lanzado al elemento' 'que tiene el mapa de imagen para funcionar. No pude probar en Android, aunque – HerrSerker

Estaba pensando que aplicaría eso al elemento de entrada detrás del cual no debería poder hacer clic, pero tal vez estoy malinterpretando el problema que tiene. Avísame si funcionó de alguna manera. – mystrdat

Me pregunto algunas cosas aquí. Primero, ¿cuál es el propósito de tener una imagen superpuesta y usar los mapas de imágenes? Veo que está incluyendo jQuery. ¿Puede usar el evento de desplazamiento con jQuery para cambiar la orientación de las imágenes y hacer el intercambio? ¿Qué hay de adjuntar al evento de clic para el mapa de imagen y verificar si la caja de luz está abierta? Si es así, entonces return false;.

Sólo trato de pensar en voz alta. A veces puede ser útil tomar otro punto de vista.

Fuente

2012-01-29 03:08:16

Tengo un mapa de imagen. Al hacer clic en él desencadena el Lightbox está antes del mapa de imagen, pero los clics pasan por la caja de luz en el mapa de imagen. Esto es un error, un comportamiento incorrecto. Y la otra pregunta. Yo uso jQuery para el vuelo estacionario. Los elementos flotantes funcionan bien. Es Android que no funciona trabaja bien. – HerrSerker

Obtienes la recompensa ya que eres el único interesado :( – HerrSerker

¿Habría la posibilidad de usar el 'return false;' en el mapa de la imagen haga clic en la mano ler, o me estoy perdiendo algo? –

En realidad, he logrado evitarlo moviendo los objetos de abajo para que no sean visibles. Pero en casos similares a los tuyos, la única solución que realmente funciona es administrar todos los clics en jquery (especialmente los que están en el fondo) y vincular/desvincular los eventos de clics en función de las necesidades. también hay algunas cosas que podrían ayudar en alguna versión/móviles (pero no resuelven el problema)

el punto anterior tiene antecedentes: RGBA (0,0,0,0.1);
debe poner un gif o png como fondo del elemento anterior (así como el color de fondo como el punto 1)
usando thouchstart en lugar de hacer clic como evento de enlace a veces ayuda.

la versión actual de Android/navegador no se ven afectados con este error (o al menos nunca me pasa), pero podría ser bueno conocer las versiones afectadas. Si alguien tiene una lista

Fuente

2015-09-08 07:01:43

¿Hay alguna solución para la falla del navegador Android con CSS-Position y áreas seleccionables?

Respuesta

Cuestiones relacionadas