5

We have a website that uses "map" and "area" tags. It is generated by saving an Excel spreadsheet to "htm" format, and it is mostly viewed in Safari on iPhones. These tags enable users to click a portion of one page and have it take them to another page.

Recently there seems to have been a change/update that causes Safari to zoom if the clickable area is touched.

Code example:

<map name="MicrosoftOfficeMap3">
  <area shape="Rect" coords="0, 0, 150, 117" href="sheet004.htm#Range!A1">
</map>

If you touch the area quickly, it will follow the link. However if your finger stays on the area for a few milliseconds, it will cause the page to zoom awkwardly.

Has anyone experienced this and have you found a way to disable to the zooming? I have tried many things with the viewport and "body" zoom settings in CSS.

Here is a link to a video showing the behavior: https://www.csmckee.com/dashboard_internal/Video.mov

If you are on iOS 13 you may be able to see the behavior in this example - touch the blue square on the frog image: https://www.csmckee.com/dashboard_internal/frog.htm

David Bradshaw
  • 11,859
  • 3
  • 41
  • 70
Lenny
  • 97
  • 7

2 Answers2

3

I think it is a bug introduced in iOS 13, caused by the removal of the 3D Touch code and its replacement by Haptic Toutch.

Notice how the sheets links at the page bottom also get "deattached" from the page and slightly zoomed... That seems to be the behavior for links before opening the preview popup.

HTML map areas are essentially links, so maybe Safari is getting confused and zooming the entire image.

It doesn't help that image maps aren't responsive (Responsive image map), so not sure playing with the viewport meta value can help.

Maybe opening the URL inside an iframe? I noticed small differences on the Haptic Touch behavior in iframe scenarios.

Nelson Antunes
  • 160
  • 7
  • Thanks for the helpful response, Nelson. I'm going to try the iframe approach and check out the behavior. I agree with your thoughts that this is likely from the switch from 3D touch to haptic. If the iframe works for me I will choose your answer. – Lenny Nov 14 '19 at 17:14
  • I tried using an iframe, but that didn't seem to help https://www.csmckee.com/dashboard_internal/frog_iframe.html – Lenny Nov 14 '19 at 20:46
  • You're right. Sorry for pointing you in the wrong direction. Yesterday I tried in a snippet similar to this: https://codepen.io/nantunes/full/NWWOVXe, and the behavior is somewhat different... So it must be something in the header or styles of the codepen.io site. – Nelson Antunes Nov 14 '19 at 22:00
  • 1
    Ok, I figured out why my wrong assumption: the top html had a `` that overrides the one inside the iframe. So basically I found out the same that you already did: that any scale other than 1 causes the problem. Good luck! – Nelson Antunes Nov 15 '19 at 15:49
2

You can prevent Safari from automatically zooming in without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute:

like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

If your website is properly designed for a mobile device you could decide not allow scaling by adding user-scalable=0

Mojtaba Hosseini
  • 95,414
  • 31
  • 268
  • 278
  • Thanks Mojtaba - I tried these approaches. Setting the scale to a locked "1" does seem to prevent the zooming when touched, however we need this to be scaled to 0.7. It seems that any website scaled to anything other than 1 has this problematic behavior. – Lenny Nov 14 '19 at 17:13