Safari on MacOS overlays block-areas on included images (inserts HTML in real time) - blocking access to my own linked areas!

Safari & Web General
softeky OP
Created Jun ’22
Replies 2
Boosts 1
Views 2.4k
Participants 1

I include a picture on an HTML page by:

<img src="./name.png" class="inline" alt="" usemap="#html"/>

I create a link map, defining areas of the picture that I want to link to notes like this:

		<map name="html">
			<area shape="circle" coords="73,250,30"
			  href="./PassiveStrideRecovery_W12_Notes.html"
			  alt="PassiveStrideRecovery_W12" target="_self"
			/>
			...(more of these areas)
		</map>

All the linked areas work fine for a few seconds and then some of the areas are obscured by automatically detected (not well though) areas of interest (to something) in the .png and stops my mouse clicks getting through to some of the linked areas I define.

When I use the Debug menu item and examine the HTML source elements (using "Develop->Show Page Source") I created. Initially they include:

a minute to so later they change to:

indicating the img has acquired some extra structure, which now looks like this:

and define some areas, some of which overlay my map areas in a layer above mine.

Looking at the last "div" created by MacOS, they seem to be inserted in real-time by Apple Data Detectors.

I changed my img include statement to

		<img src="./GroundContact_W7_Bubbles.png" x-apple-data-detectors="false" class="inline" alt="" usemap="#html"/>

but it made no difference.

How do I stop real-time area overlay of click-obscuring blocks over pictures included on my HTML page?

TIA

Replies  2
Boosts  1
Views  2.4k
Participants  1
softeky OP
Jul ’22

Adding to the original post. No positive progress, just more detail and things I've tried that don't work.

	<body>
		<!-- Does not work, datadetectors still on, overlaying/hiding the .png map links
			<div datadetectors="off" x-apple-data-detectors="false" class="NoDDs">
				<a datadetectors="off" x-apple-data-detectors="false" style="display: inline">
					<img src="./GroundContact_W7_Bubbles.png" datadetectors="off" x-apple-data-detectors="false"  class="inline" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">
				</a>
			</div>
		-->
		<!-- Does not work, datadetectors still on, overlaying/hiding the .png map links
			<img src="./GroundContact_W7_Bubbles.png" datadetectors="off" x-apple-data-detectors="false"  class="inline" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">
		-->
		<!-- Does not work, datadetectors still on, overlaying/hiding the .png map links
			<h1 datadetectors="off">
				<img src="./GroundContact_W7_Bubbles.png" datadetectors="off" x-apple-data-detectors="false"  class="inline" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">
			</h1>
		-->
		<!-- Does not work, datadetectors still on, overlaying/hiding the .png map links
			<a href="#" datadetectors="off" x-apple-data-detectors="false">
				<img src="./GroundContact_W7_Bubbles.png" class="inline" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">
			</a>
		-->
			<!-- Does not work, datadetectors still on, overlaying/hiding the .png map links
			<img src="./GroundContact_W7_Bubbles.png" datadetectors="off" x-apple-data-detectors="false"  class="inline" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">
		-->
		<!-- Does not work, datadetectors are on, overlaying/hiding the .png map links.
			Definition order - map first, makes no difference. usemap before src also makes no difference.
			.gif vs .png makes no difference.
		-->
		<img src="./GroundContact_W7_Bubbles.png" alt="./GroundContact_W7_Bubbles.png: not found" usemap="#html">

		<map name="html">
			<area shape="circle" coords="73,250,30" href="./PassiveStrideRecovery_W12_Notes.html" alt="PassiveStrideRecovery_W12" target="_self">
			<area shape="circle" coords="174,250,30" href="./QuietFeet_W6_Notes.html" alt="QuietFeet_W6" target="_self">
			<area shape="circle" coords="63,350,30" href="./ArmSwing_W4_Notes.html" alt="ArmSwing_W4" target="_self">
			<area shape="circle" coords="133,350,30" href="./Breathing_W11_Notes.html" alt="Breathing_W11" target="_self">
			<area shape="circle" coords="205,350,30" href="./ForwardTilt_W8_Notes.html" alt="ForwardTilt_W8" target="_self">
			<area shape="circle" coords="286,350,30" href="./HeadPosture_W10_Notes.html" alt="HeadPosture_W10" target="_self">
			... (more map areas here. One for each circle in the image)
			...
		</map>
	</body>

Here's one of the 27 areas in my .png that "Data Detectors" creates, that block some of my own mapped areas. I create a linked map for each circle in the .png, each limited to the associated circle's size:

I don't know what Data Detectors is identifying or why. Whenever I refresh the URL the "x-apple-data-detectors-result" grows, though no additional blocks are identified.

I'm still trying to stop Data Detectors obscuring my created (mapped) links.

Any help appreciated.

1
softeky OP
Nov ’22
Accepted Answer

PROBLEM SOLVED

Apple came up with a workaround. HOOOORRRAAAAY!

Thanks to Apple Developer Series (David K and Jon D). They suggested that since turning off Data Detectors (within the <img src=...>) was not working and neither was their initial attempt to use "-webkit-user-select: none", the workaround was to hide the .png away behind a transparent window. The mapped links could be attached to the transparent window and the Apple Data Detectors would not be able to see through this window to create its own overlayed links (useless as those links were).

Brilliant!

The workaround result was achieved by replacing the original "<img src=...>" with these two lines:

		<img src="./transparent.png" class="inline" id="transparent" usemap="#html">
		<img src="./GroundContact_W7_Bubbles.png" class="inline" id="bubbles" alt="GroundContact_W7: not found">

Plus the following CSS (in the same html file):

	<style type="text/css">
		#bubbles {
			pointer-events: none;
		}
		#transparent {
			position: absolute;
			background-color: #ffffff;
			opacity: 0.01;
			width: 2502px;
			height: 745px;
		}
	</style>

Notes:

  1. "transparent.png" had to be a real picture file. I used a screenshot of a small square section of white screen and uploaded it to my server.
  2. opacity of 0.0 did not work as Data Detectors could see through that. 0.01 works as needed.
  3. width/height numbers were supplied by my "bubble creator" when the linked html was generated. I bet it's possible to fetch those numbers from the loaded .png using javascript, if needed.

For comparison, the working (new) version is at:

	https://softekpartners.com/WFR/GroundContact_W7_Bubbles.html

while the original, not working, version is at:

	https://softekpartners.com/WFR/orig_GroundContact_W7_Bubbles.html

Thanks again to Apple. Very nicely done.

--Instead of Defensive Programming... it's now Defenestrative Programming!

2
Safari on MacOS overlays block-areas on included images (inserts HTML in real time) - blocking access to my own linked areas!
First post date Last post date
 
 
Q