html 图像映射在 iOS Safari 上停止工作
html image map stops working on iOS Safari
因此，有一个 html 页面，其中包含图像映射（具有 usemap 属性的 img 标记）和可点击区域。最近，我认为在 iphone（XR、XS、13）上 iOS 15 升级后，Safari 停止在区域上触发 onclick 事件。最初，如果您轻按手指并快速按下，onclick 会起作用，但是一旦您轻按更长的时间（稍微用力点按或长按），它就会开始表现得好像没有地图和与图像相关的区域。
你可以在这里测试https://demo.rezmagic.com/maptest.html
如果您看到“区域点击”消息，则说明它工作正常。当您开始看到“图像点击”消息时，这意味着它已损坏 - 它不再检测区域。如果您重新加载页面，它会再次开始正常工作。
对这里发生的事情有什么想法吗？可能的解决方法？我在 Apple 反馈中提交了一个 Safari 错误，但我不确定这是正确的地方。
这绝对是移动和桌面上的 Safari 错误，它让我抓狂。您的图片不会在桌面版 safari 中重现此问题，但具有更高分辨率和更明显文字的图片会重现此问题。
现在的情况是，Safari 现在对图像进行 OCR，以允许用户select 并从中复制文本。它通过添加包含漂浮在图像上方的文本的阴影 DOM 元素来实现，所有元素都包含在一个完全覆盖图像的 DIV 中。这不会立即发生，但似乎需要一点时间，并且可能取决于用户与图像的交互。
您可以通过打开地图元素的 MDN 网络文档页面 here 并使用 Inspect Element 查看示例（不是演示）来观察这种情况。带有地图的 img 标签开始时很简单，但是一旦它显示它有子元素，您就可以展开它并看到阴影 DOM 元素。一旦添加了这些，地图就不再起作用，大概是因为叠加元素通过点击传递到图像而不是地图。
对于较新的 Safari 浏览器破坏图像映射的 OCR 功能，米克斯似乎是正确的。
以下是您可以使用的一种解决方法，但它会破坏 OCR 功能：
创建一个与图像贴图大小相同的透明 gif。我们称它为 placeholder.gif。然后添加实际图像的 in-front 并在其上放置图像映射，如下所示：
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
对我有用。
我开发了一种解决方法，您可以在其中侦听图像上的点击事件，获取点击事件的 offsetX 和 offsetY 坐标，然后遍历元素以将事件的偏移量与坐标进行比较，然后触发对匹配项的点击。
但是，后来我意识到 iOS 15.4 今天发布了，所以我升级了我的 iPhone，它现在似乎已修复，没有任何解决方法。所以只要升级就可以了。
因此，有一个 html 页面，其中包含图像映射（具有 usemap 属性的 img 标记）和可点击区域。最近，我认为在 iphone（XR、XS、13）上 iOS 15 升级后，Safari 停止在区域上触发 onclick 事件。最初，如果您轻按手指并快速按下，onclick 会起作用，但是一旦您轻按更长的时间（稍微用力点按或长按），它就会开始表现得好像没有地图和与图像相关的区域。
你可以在这里测试https://demo.rezmagic.com/maptest.html
如果您看到“区域点击”消息，则说明它工作正常。当您开始看到“图像点击”消息时，这意味着它已损坏 - 它不再检测区域。如果您重新加载页面，它会再次开始正常工作。
对这里发生的事情有什么想法吗？可能的解决方法？我在 Apple 反馈中提交了一个 Safari 错误，但我不确定这是正确的地方。
这绝对是移动和桌面上的 Safari 错误，它让我抓狂。您的图片不会在桌面版 safari 中重现此问题，但具有更高分辨率和更明显文字的图片会重现此问题。
现在的情况是，Safari 现在对图像进行 OCR，以允许用户select 并从中复制文本。它通过添加包含漂浮在图像上方的文本的阴影 DOM 元素来实现，所有元素都包含在一个完全覆盖图像的 DIV 中。这不会立即发生，但似乎需要一点时间，并且可能取决于用户与图像的交互。
您可以通过打开地图元素的 MDN 网络文档页面 here 并使用 Inspect Element 查看示例（不是演示）来观察这种情况。带有地图的 img 标签开始时很简单，但是一旦它显示它有子元素，您就可以展开它并看到阴影 DOM 元素。一旦添加了这些，地图就不再起作用，大概是因为叠加元素通过点击传递到图像而不是地图。
对于较新的 Safari 浏览器破坏图像映射的 OCR 功能，米克斯似乎是正确的。
以下是您可以使用的一种解决方法，但它会破坏 OCR 功能：
创建一个与图像贴图大小相同的透明 gif。我们称它为 placeholder.gif。然后添加实际图像的 in-front 并在其上放置图像映射，如下所示：
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
对我有用。
我开发了一种解决方法，您可以在其中侦听图像上的点击事件，获取点击事件的 offsetX 和 offsetY 坐标，然后遍历元素以将事件的偏移量与坐标进行比较，然后触发对匹配项的点击。
但是，后来我意识到 iOS 15.4 今天发布了，所以我升级了我的 iPhone，它现在似乎已修复，没有任何解决方法。所以只要升级就可以了。