Why has sensitivity of clicking on HTML image map area elements become less sensitive in iOS 8?

Question

Level 1

8 points

Why has sensitivity of clicking on HTML image map area elements become less sensitive in iOS 8?

Hi - I had a 'bug' come in at work yesterday where links on image maps on our website were said not to be working. I investigated and found that on iOS 8 in safari, to register a 'click' when tapping on an HTML area element within an image map, you now need to hold your finger down longer to register the click. In fact - you need to hold it down longer than many of our users were doing so they were saying the image map just wasn't working.

This did seem odd so I created an isolated instance of an image map with onclick handlers and, sure enough, on iOS 7 and below, on safari, a very light tap would trigger a click event but - on iOS8 on safari, I need to hold my finger down much longer in order to register a click event.

The problem was raised by a number of people so I've had to put in a fix - using event delegation on a parent wrapper binding to the 'touchend' event for any 'area' element and then using the href attribute of the area element to redirect.. That seemed to fix it.

But - it seems odd that the sensitivity has changed (we have tested this on multiple iOS devices with different iOS versions and even upgraded older iOS versions on the same device to prove this). And - this happens on all image maps - not just our own image maps with their specific click handlers. I created several different image maps - just with standard href attributes on the area elements and the sensitivity has dropped off on iOS8.

Does anyone know why this has happened and if there is a better fix for this issue than I put in place (as I have to now not only handle the touchend event but also check to see if the user was intending to scroll the window, rather than click on an element).

Any thoughts on this would be most appreciated.

Thanks

iPad, iOS 8, any iOS8 device

Posted on Oct 14, 2014 6:15 AM

Reply

Answer 1

Oct 15, 2014 9:22 AM in response to loydall

Do you mind posting your fix? I am also experiencing this issue. Thanks!

Reply

Answer 2

etresoft

Level 9

57,032 points

Oct 15, 2014 5:51 PM in response to loydall

loydall wrote:

Does anyone know why this has happened and if there is a better fix for this issue than I put in place

I hadn't heard about this until you mentioned it. Web site design is a very social endeavour. Everyone tends to do the same things at the same time. I haven't seen an image map for a long, long time. A better fix would be a more "responsive" web site that makes better use of the latest technologies. To be perfectly blunt about it, who do you want to serve with your site? People with 3GS or 4s or people who just bought an iPhone6? Which are more likely to have disposable income to shower you with?

Reply

Answer 3

loydall Author

Level 1

8 points

Oct 16, 2014 1:21 AM in response to etresoft

Well that's just the most ridiculous response I've ever heard.

1: There are plenty of very large and successful companies who still serve their customers through sites running image maps.

2: Image maps are still part of the HTML 5 specification so browsers should support them - mobile or otherwise.

More to the point - up until now iOS + Safari handled image maps perfectly well. All of a sudden a portion of mobile users on many, many sites will experience difficulty navigating through the site. That's pretty bad.

And - who do I want to serve with my site? As many people as possible thank you very much. It's a very, very bad developer who only targets the latest devices and platforms. Sure - we have to draw the line somewhere.. maybe IE6 is a cut off point but it's a simple case of looking at your webstats and making sure your site works for as many people as possible.

For many, large and very successful sites that use image maps (of which there are many) a simple 'fix' and move to responsive solution could involve months of development, testing and investment.

chrisnetonline - in answer to your question, assuming you have jquery on your site, a fix would look something like this:

$("body").on('touchend', 'area', function () {

window.location = $(this).attr("href");

});

But - you may want to wrap your image map in a wrapper element and target that rather than the entire body tag. And - you'll also need to check how far the user has scrolled so you don't trigger a redirect when they scroll.

Like I say - this is just a demo of a possible solution and would require testing and refining to suit your particular requirements.

Ideally there would be a better solution than this though.

Ideally the problem wouldn't be there in the first place.

Reply

Answer 4

etresoft

Level 9

57,032 points

Oct 16, 2014 5:25 AM in response to loydall

loydall wrote:

Well that's just the most ridiculous response I've ever heard.

Then hang on to your socks, buddy...

Microsoft turned the corner with IE 9. It wasn't half bad. But that was 4 years ago. Today, Chrome rules the desktop and Safari runs mobile. An image map is a particularly poor choice for a mobile web site. If you did happen to be a large and successful corporation with lots of legacy customers on subscription plans, then keeping a familiar image map for their old desktop machines might be a good idea. But new customers with mobile devices don't want that. Give your customers what they want and expect, not what is easiest for you. So what if Apple doesn't care much about image maps on the mobile platform. Last time I checked, Apple was known for being particularly good in that domain. I suggest you follow their lead.

Reply

Answer 5

loydall Author

Level 1

8 points

Oct 16, 2014 5:55 AM in response to etresoft

A.K.A. 'missing the point of the original question'.

Monday - the site works perfectly well on iOS. Image maps doing a perfectly fine job - all customers happy.

Tuesday - a percentage of users now can't use the site because the upgrade made it harder to click on an image map.

i.e. Overnight an upgrade had a negative effect on a site that had been proven to not just work but excel on mobile devices.

You're going to want to know what happened right?

And - 'new customers with mobile devices don't want that.' How do you know? I guarantee 99.9% of users wont care less what technology is driving a site. As long as it works well and they can use the site, they wont give two hoots about what the markup of a page is doing.

The point is this - an update to iOS has made an HTML element that is part of the HTML 5 spec behave in an undesirable way.

My point is quite clear - a browser used by so many people should stick to standards and specifications. On this occasion there's a problem with their software and I want to know why.

I'm not entirely sure what your point is... It's certainly not very constructive.

Reply

Answer 6

etresoft

Level 9

57,032 points

Oct 16, 2014 10:18 AM in response to loydall

loydall wrote:

And - 'new customers with mobile devices don't want that.' How do you know? I guarantee 99.9% of users wont care less what technology is driving a site. As long as it works well and they can use the site, they wont give two hoots about what the markup of a page is doing.

So why does it have to be implemented with an image map? That is just not a good solution for a 4" screen.

My point is quite clear - a browser used by so many people should stick to standards and specifications. On this occasion there's a problem with their software and I want to know why.

I'm not entirely sure what your point is... It's certainly not very constructive.

How do you define constructive? Giving you good suggestions in line with what the entire industry is doing and what makes the most sense on a given platform? That sounds pretty constructive to me. You want to know why Apple made some change and when or if they are going to change it - either back or to some different behaviour? You will never get an answer for that. If enough people complained, they might change it back. But by "enough" I mean literally tens of millions. Do you have that many customers on iPhones? I'm sorry, but you have to accept relative power relationships as they exist in the industry. Apple makes the rules. Apple follows standards if they make sense for Apple's platforms and if they feel like it that day. Your only option is to accept. If you want, you can choose to adapt use techniques that are better suited to a small touchscreen.

Reply

Answer 7

Aug 18, 2016 9:16 PM in response to loydall

loydall,

It is unfortunate that a few people on this site were so quick to talk smack. You are right image maps are awesome. They are in the html5 spec and apple iPhone safari should support them.

Responsive websites are fine for some people who don't care if their design changes but image maps are the only way to make a website look exactly like you want it to. IMO as a designer I want to be specific and image maps let you do that. I have been using image maps for 20 years and I like them. I can make a web page look exactly like I want it to and that matters big time.

Please report back to this thread with any update that has worked for you. I am in the same boat and I know you are right about everything you said.

For those who think that image maps are not important, tell me....

How would you solve the following simple problem with a responsive website?

Client is Salvador Dali museum, and they want you, (the advanced, ever so smart web designer) to use the "Melting Watch" painting as the image and make the numbers on the clock into click-able links.

How would you do that?

If you can not tell me how to do this.... then you owe Loydall a public apology in this thread 🙂

In the future, be kind, it will take you places you never imagined...

Reply

Answer 8

Aug 18, 2016 9:34 PM in response to shinyredguitar

I just noted that Apple Developer page sites all these image map attributes as supported... https://developer.apple.com/library/ios/documentation/AppleApplications/Referenc e/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-DontLink ElementID_1

Reply

Answer 9

etresoft

Level 9

57,032 points

Aug 19, 2016 8:13 AM in response to shinyredguitar

Hello sinyredguitar,

Alas, it isn't 1996 anymore. Even if it were, I don't see how you would ever turn the numbers on these Dali clocks into clickable links:

Now, if you did have a readable watch face, a responsive design would allow you to click somewhere on the watch face, animate the hands over to that place, and then show whatever information would be applicable for that time. You could do that in a few bytes with SVG and it would look great on any device at any size.

There are times when it makes sense to stick with proven, 20 year-old technology. And then there are times to abandon that which no longer serves.

Reply