Menu
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
807
( It does not disable user zoom on iOS devices since v10 .) We can use JavaScript to dynamically add maximum-scale to the meta viewport when the device is iOS. This achieves the best of both worlds: we allow the user to zoom and prevent iOS from zooming into text fields on focus.
If you use the most common HTML viewport meta settings, clicking on an input element will automatically trigger auto zoom on iOS devices. At least on Smartphones. I’ve tested this on iPhone 4, 5 and 6, using the Safari and Chrome browser.
This keeps the page manually zoomable. This is not necessarily the "proper" way to prevent this behaviour. Mobile Safari zooms in if the text is deemed too small to read. Switching off zooming all together is heavy handed and prevents users from being able to interact with your page in a way that they may expect.
Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior. However, some might argue that this is not a very user-friendly way to handle the problem.
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.
159
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
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
