Entonces, hay una página html con un mapa de imagen (etiqueta img con atributo usemap) y áreas en las que se puede hacer clic. Últimamente, creo que después de la actualización de iOS 15 en iPhone (XR, XS, 13), Safari deja de activar eventos onclick en áreas. Inicialmente, onclick funciona si toca ligeramente, con presiones rápidas con los dedos, pero tan pronto como toca un poco más (solo un toque un poco más fuerte o una presión prolongada), comienza a comportarse como si no hubiera un mapa y áreas asociadas con la imagen.
Puedes probar aquí https://demo.rezmagic.com/maptest.html
Si ve mensajes de "clic de área", funciona correctamente. Cuando comienza a ver mensajes de "clic en la imagen", significa que está roto; ya no detecta áreas. Si recarga la página, comienza a funcionar correctamente de nuevo.
¿Alguna idea sobre lo que está pasando aquí? ¿Posible solución? Envié un error de Safari en los comentarios de Apple, pero no estoy seguro de que fuera el lugar correcto.
Meeks parece tener razón sobre la capacidad de OCR de los navegadores Safari más nuevos que rompen los mapas de imágenes.
La siguiente es una solución alternativa que puede usar, pero romperá la capacidad de OCR:
Cree un gif transparente del mismo tamaño que el mapa de imágenes. Llamémoslo placeholder.gif. Luego agréguelo frente a la imagen real y coloque un mapa de imagen en eso, así:
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
Esto funciona para mi.
Esto es absolutamente un error de Safari en dispositivos móviles y de escritorio y me ha estado volviendo loco. Su imagen no replica el problema en el safari de escritorio, pero las que tienen una resolución más alta y un texto más obvio sí lo hacen.
Lo que sucede es que ahora Safari utiliza OCR para permitir a los usuarios seleccionar y copiar texto de ellas. Lo hace agregando elementos DOM de sombra que contienen el texto que flota sobre la imagen, todos contenidos dentro de un DIV que cubre completamente la imagen. Esto no sucede instantáneamente, pero parece tomar un poco de tiempo y tal vez depende de la interacción del usuario con la imagen.
Puede ver cómo sucede esto abriendo la página de documentos web de MDN para el elemento del mapa aquí y observando el Ejemplo (no la demostración) con Inspeccionar elemento. La etiqueta img con el mapa comienza de manera simple, pero una vez que muestra que tiene elementos secundarios, puede expandirla y ver los elementos DOM ocultos. Una vez que se agregan, el mapa ya no funciona, presumiblemente porque los elementos superpuestos pasan a través de clics en la imagen pero no en el mapa.
Desarrollé una solución en la que escucha los eventos de clic en la imagen, obtiene las coordenadas offsetX y offsetY del evento de clic, luego itera a través de los elementos para comparar las compensaciones del evento con las coordenadas y luego activa un clic en el que coincide.
Sin embargo, luego me di cuenta de que iOS 15.4 salió hoy, así que actualicé mi iPhone y parece estar arreglado ahora sin ninguna solución. Así que solo actualice y debería estar bien.