Safari's OCR/Live Text is blocking image zones about imagemapster HOT 3 CLOSED

Hello @jarodljohnson -

Thank you for reporting this. In doing some research, there are other reports of Live Text causing issues with imagemaps (and other img based scenarios) so this does not appear to be an issue with imagemapster itself, but rather an issue with Live Text and it interfering with imagemaps in general.

Here is a repro of an imagemap without imagemapster and it exhibits the same issue as your repro when Live Text is enabled on the system.

In an effort to try to find a solution, I was hopeful that there is a way to "disable" Live Text for a particular image on a webpage but I was unable to find a way to do this outside of turning off Live Text on the entire system. There is mention of being able to use the html attribute x-apple-data-detectors="false" (here) and/or setting css webkit-user-select: none; user-select: none; (here) but neither seemed to work as I believe they both may be specific to anchor elements (I'm far from an Apple expert).

Fortunately, I was able to come up with a solution based on information found in the following:

1. https://stackoverflow.com/questions/70779449/html-image-map-stops-working-on-ios-safari
2. https://forums.developer.apple.com/forums/thread/709384

In short, imagemapster takes the original image and makes a copy of it and then adds canvas elements for drawing, however it leaves the original image in-place with an opacity of 0 as the map itself is associated to the original img element. Live Text is grabbing a hold of the original image and attaching to it so based on some testing, the key is avoiding having Live Text find any text so that it just "moves on" so to speak. We can accomplish this by changing the src attribute of the original image after imagemapster has completed its initialization.

  onConfigured: () => {
    // Replace the original source with a 1x1 transparent image
    $img.attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
    // Replace the css attributes to ensure we take up full container height/width
    // and are "visible" so Live Text doesn't look "through" the image
    $img.css({
      height: '100%',
      width: '100%',
      opacity: 0.01
    });
  }

Links to Solutions:
Simplified version of your original repro
Modified version of your original repro

I've tested the solution in various imagemapster configurations (e.g., auto resize enabled, rebinding, etc.) and it seems to work across the board. However, given this is a workaround and the root issue isn't really an ImageMapster issue directly, I'm hesitant to officially add this as a feature to ImageMapster, at least not without a lot more testing and evaluation of other potential approaches, but I'm hopeful that this may help you and/or anyone else that is encountering this issue.

All that said, since it's been a while since you posted this issue, I'm curious if you were ever able to come up with a solution as there may be better approaches than the one that I suggest above?

Thanks!

from imagemapster.

from imagemapster.

Thanks for circling back @jarodljohnson. Makes sense about Image Map Pro not having issues with Live Text as they take a different approach for "hot" areas so there are "blocking" elements on top of the image itself that prohibits Live Text from reading the image text.

One thing I didn't mention in previous post is that if unbind is called, the original source image would need to be put back so that the transparent image doesn't remain. A sample of how to do this is here.

I'm going to close out this issue but if you do end up revisiting any of this in the future, would appreciate you sharing your results/findings.

from imagemapster.