We Keep Coding

html image map stops working on iOS Safari

So, there's an html page with an image map (img tag with usemap attribute) and clickable areas. Lately, I think after iOS 15 upgrade on iphone (XR, XS, 13), Safari stops firing onclick event on areas. Initially onclick works if you tap lightly, with quick finger presses, but as soon as you tap a little longer (just a bit stronger tap, or a long press) it starts behaving as if there's no map and areas associated with the image.
You can test here https://demo.rezmagic.com/maptest.html
If you see "area click" messages, it works correctly. When you start seeing "image click" messages, it means it's broken - it does not detect areas anymore. If you reload page, it starts to work correctly again.
Any ideas on what's going on here? Possible workaround? I submitted a Safari bug on Apple feedback but I am not sure it was the right place.

meeks seems to be correct about the OCR capability of newer Safari browsers breaking image maps.
The following is one workaround that you can use, but it will break the OCR capability:
Create a transparent gif of the same size as the imagemap. Let's call it placeholder.gif. Then add it in-front of the actual image and put an image map on that, like so:
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
It works for me.

This is absolutely a Safari bug on mobile and desktop and it's been driving me nuts. Your image doesn't replicate the issue on desktop safari, but those with higher resolution and more obvious text do.
What's happening is that Safari now OCRs images to allow users to select and copy text from them. It does this by adding shadow DOM elements containing the text that float above the image, all contained within one DIV that entirely covers the image. This doesn't happen instantly, but seems to take a little time and perhaps depend on user interaction with the image.
You can watch this happen by opening the MDN web docs page for the map element here and looking at the Example (not the demo) with Inspect Element. The img tag with the map starts out simple, but once it shows that it has children you can expand it and see the shadow DOM elements. Once those are added the map no longer functions, presumably because the overlay elements pass through clicks to the image but not the map.

I had developed a workaround where you listen for click events on the image, get the click event's offsetX and offsetY coordinates, then iterate through the elements to compare the event's offsets with the coordinates, and then trigger a click on the that matches.
However, then I realized that iOS 15.4 came out today and so I upgraded my iPhone and it seems to be fixed now without any workarounds. So just upgrade and you should be fine.

Fixed position not working on ios devices

I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.

Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.

Android Native Browser duplicating HTML5 canvas (fine in chrome)

This is a weird issue that I am only experiencing on a Native browser on Samsung Galaxy Tab 2 and Galaxy S2 in the native browser.
This has also been tested on other android phones and tablets such as the Nexus 7 & Galaxy S4 but their native browser is chrome, so it appears fine. This issue is also not present on any IOS browsers, Windows Desktop browsers or Mac Desktop browsers.
It's almost asif the webpage is loaded twice ontop of itself!
As there is a duplicate canvas element, that updates as the main canvas does.
Here it appears asthough it only happens when rotated in landscape mode, but I beleive that in portrait mode, the canvas' are perfectly aligned over the top.
What is even weirder, the menu button that you see is a toggle button, tap to open menu, tap to close menu. On this device when you tap it, it opens and closes instantly. the same happens for the mute button toggle.
I'm completely at a loss.
I have done some javascript debugging throwing in a few alerts here and there, and the initialisation functions that create references to the canvas and so on are only called once.
I have read and heard about hardware acceleration causing issues, but solutions i've potentially found are only relative to building native apps! not HTML5 Canvas webpages.
Any insight on this could be would be great!
Thanks in advance.
--EDIT
I also put in this test alert(document.getElementsByTagName('canvas').length); to see if there was 2 canvas in the DOM but it returns 1!

I ran into this same issue. I was able to fix this by running the following code after making a change to my canvas:
// If Samsung android browser is detected
if (window.navigator && window.navigator.userAgent.indexOf('534.30') > 0) {
// Tweak the canvas opacity, causing it to redraw
$('canvas').css('opacity', '0.99');
// Set the canvas opacity back to normal after 5ms
setTimeout(function() {
$('canvas').css('opacity', '1');
}, 5);
}
By tweaking the opacity, this forced the canvas to redraw and removed the duplicate shapes. It's a dumb fix but it works. Hopefully this helps someone.

Also you may look at this collections of such tips: http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

For double canvas issue there is a bug logged https://code.google.com/p/android/issues/detail?id=35474 you may want to check suggested solutions.
In my case this issue appeared only if I had Force GPU rendering enabled.
Issue usually appears if you have some parent element for canvas that has CSS overflow: hidden

remove overflow property from all canvas parents,probably we don’t need this property on touch devices:
$("canvas").parents("*").css("overflow", "visible");
It is well explained at http://slash-system.com/en/how-to-fix-android-html5-canvas-issues/

Mouse X/Y detection within Flash stage not working Moz & Webkit on PC

I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!

i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.

Javascript and rendering pauses and stays paused on scroll in the android browser

I've found some wierd behaviour related to scrolling and rendering and javascript.
How to make it happen:
On any webpage that is long enough to scroll on. Start to scroll pretty fast (fling the page). then release the touch.
Now while the page is still scrolling because of the momentum. Tap the screen to stop the scroll.
This make the browser enter a wierd mode.
On the nexus one it behaves like this:
The updating of what's shown on the screen stops, you can still click on links and the go to where they are supposed to but what's shown on the screen stays the same.
If you then scroll the screen a bit the update of the screen kicks in again and what you you where suppsed to see all the time is shown.
On all phones with HTC Sense I've tried (Hero, Desire, Legend) this happens:
The updating of the screen is stopped just like on the nexus one, but also the execution of any javascript is stopped.
If you click on a link that takes you to another page however things return to normal again.
The way I tested this was I created a page like this:
http://pastebin.ca/1881620
The changeColor function simply changed the background color of 'container' to a few different colors.
So before the error what happens is that when you click any link the color changes.
after the error this happens:
Nexus one:
when you click on the links nothing happens (except the "orange link selected rounded corner box thing" is shown as if the link is clicked). Then when you scroll abit.
You can see the color has changed (and equal amount of times to the number of times I clicked the link).
On Sense:
The links take me to google.com
Has anyone else noticed this problem? Is there anyway to work around it?
Thanks.

You could try using a plugin that manipulates the browser's scrolling process, such as iScroll4.
iScroll4 let us do some pretty cool stuff (like fixed headers/footers), but it did have some performance problems in some of the older/crappier Android phones...
I can't guarantee that it'd fix your problem, and it'd be kind of a last resort, but it might be worth trying if you're interested in iScroll's other features, or if you've hit a dead end with your bug, and it's a show-stopper for your app.