2

So, there's an html page with an image map (img tag with usemap attribute) and clickable areas. Lately, I think after iOS 15 upgrade on iphone (XR, XS, 13), Safari stops firing onclick event on areas. Initially onclick works if you tap lightly, with quick finger presses, but as soon as you tap a little longer (just a bit stronger tap, or a long press) it starts behaving as if there's no map and areas associated with the image.

You can test here https://demo.rezmagic.com/maptest.html

If you see "area click" messages, it works correctly. When you start seeing "image click" messages, it means it's broken - it does not detect areas anymore. If you reload page, it starts to work correctly again.

Any ideas on what's going on here? Possible workaround? I submitted a Safari bug on Apple feedback but I am not sure it was the right place.

igorp
  • 23
  • 4
  • That's the right place for Safari bugs, but don't get your hopes high. They're quite slow, AFAIK. – tao Jan 20 '22 at 00:42
  • Have you tried alternative events? `tap`, `mouseup`, `taphold`? – tao Jan 20 '22 at 00:48
  • I tried mouseup - same problem - ignores areas and starts only generating image events – igorp Jan 20 '22 at 01:06
  • If you disable ‘Live Text’ on this settings page all works fine. [![Language and Region config screenshot](https://i.stack.imgur.com/yCTUN.png)](https://i.stack.imgur.com/yCTUN.png) – Phil Feb 27 '22 at 07:44

3 Answers3

1

meeks seems to be correct about the OCR capability of newer Safari browsers breaking image maps.

The following is one workaround that you can use, but it will break the OCR capability:

Create a transparent gif of the same size as the imagemap. Let's call it placeholder.gif. Then add it in-front of the actual image and put an image map on that, like so:

<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here

It works for me.

user1525020
  • 11
  • 2
0

This is absolutely a Safari bug on mobile and desktop and it's been driving me nuts. Your image doesn't replicate the issue on desktop safari, but those with higher resolution and more obvious text do.

What's happening is that Safari now OCRs images to allow users to select and copy text from them. It does this by adding shadow DOM elements containing the text that float above the image, all contained within one DIV that entirely covers the image. This doesn't happen instantly, but seems to take a little time and perhaps depend on user interaction with the image.

You can watch this happen by opening the MDN web docs page for the map element here and looking at the Example (not the demo) with Inspect Element. The img tag with the map starts out simple, but once it shows that it has children you can expand it and see the shadow DOM elements. Once those are added the map no longer functions, presumably because the overlay elements pass through clicks to the image but not the map.

meeks
  • 16
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 30 '22 at 03:55
  • Makes sense now. They added functionality for images but forgot about image maps. Longer clicks too, because they probably trigger text selection. – igorp Jan 31 '22 at 06:34
0

I had developed a workaround where you listen for click events on the image, get the click event's offsetX and offsetY coordinates, then iterate through the elements to compare the event's offsets with the coordinates, and then trigger a click on the that matches.

However, then I realized that iOS 15.4 came out today and so I upgraded my iPhone and it seems to be fixed now without any workarounds. So just upgrade and you should be fine.

Rozgonyi
  • 1,027
  • 13
  • 27