So I have an application with a UIWebView that basically contains an image with an image map as a form of custom navigation. Up until iOS 10.2.x this was working fine, but since 10.3.1, my users have been reporting that clicking on the image map sectors doesn't work anymore.
I've tested this inside the app as well as with the HTML file in iOS Safari, and it seems to be true that the image map doesn't work anymore. It does still work in Safari on Mac, but that's of no use to me.
Other image maps work, for example this image map on w3schools. What is wrong with mine?
Are there any changes I can make so the image map works again?
This is the HTML I'm 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>
So I figured out what was wrong with my image map code.
If you look in the code included with the original post, you'll see my usemap was #m_trianglemap while the map name is m_triangleMap, just the different casing, basically. On all other browsers and Safari iOS before 10.3.1, usemap is not case sensitive. Now it is case sensitive. Once I changed the usemap value to match the name in casing, it started working again.