HTML image maps not working on iOS since 10.3
So, I have an application with a UIWebView that basically contains an image with an image map as a custom navigation form. Before iOS 10.2.x this worked fine, but as of 10.3.1 my users are reporting that clicking on image map sectors no longer works.
I tested this in both the app and the HTML file in iOS Safari and it seems that the image map doesn't work anymore. It still works in Safari on Mac, but it's no use to me.
Other imagemaps work, for example this imagemap at w3schools. What's wrong with mine?
Are there any changes I can make to get the imagemap to work again?
This is the HTML I am using for the imagemap:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, shrink-to-fit=YES">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<p>
<img name="triangle" src="triangle.png" usemap="#m_trianglemap" />
</p>
<map name="m_triangleMap">
<area alt="activity" title="" href="activity" shape="poly" coords="1,389,491,390,447,325,42,325"/>
<area alt="water" title="" href="water" shape="poly" coords="82,258,41,323,447,325,399,261" />
<area alt="carbs" title="" href="carbs" shape="poly" coords="122,190,80,257,398,257,352,191" />
<area alt="vegetables" title="" href="vegetables" shape="poly" coords="123,190,247,191,246,131,161,129" />
<area alt="fruit" title="" href="fruit" shape="poly" coords="249,191,355,192,317,131,247,131" />
<area alt="dairy" title="" href="dairy" shape="poly" coords="160,127,243,129,242,65,199,66" />
<area alt="meat" title="" href="meat" shape="poly" coords="245,130,315,131,271,64,244,65" />
<area alt="fat" title="" href="fat" shape="poly" coords="217,39,201,64,273,65,258,41" />
<area alt="rest" title="" href="rest" shape="poly" coords="237,3,220,31,254,31" />
<area alt="general" title="" href="general" shape="poly" coords="156,25,55,25,55,120,151,120" />
</map>
</body>
</html>
source to share
So I figured out what was wrong with my image map code.
If you look at the code included in the original post, you can see that my usemap was #m_trianglemap
, while the name of the map m_triangleMap
, is just a different corpus, basically. In all other browsers and Safari iOS up to 10.3.1, usemap is not case sensitive. It is now case sensitive. As soon as I changed the value of usemap to match the name in the corpus, it started working again.
source to share