Won't trigger on SVG shapes in iOS (solution provided)

[bruce133]

The following HTML snippet worked fine on desktop and emulated iOS (in Chrome), however on an actual iPad the SVG shapes wouldn't trigger the modals.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 588" style="enable-background:new 0 0 1024 588;" xml:space="preserve">
	<style type="text/css">
		.st0{fill:#295F99;}
		.st1{fill:#E0E019;}
		.st2{fill:#EA1C3F;}
	</style>
	<g id="Layer_2">
		<image style="overflow:visible;" width="1104" height="633" xlink:href="images/floorTestASVG.jpg"  transform="matrix(0.9272 0 0 0.9272 -2 3)"></image>
	</g>
	<g id="Layer_1">
		<path class="st0" d="M90,114v52h100C190,166,186.5,91.5,90,114z"/>
		<rect data-remodal-target="rect1" x="247" y="16" class="modaltrigger st1" width="43" height="60"/>
    		<circle data-remodal-target="circle1" class="modaltrigger st2" cx="865" cy="337" r="30"/>
	</g>
</svg>

<div class="remodal" data-remodal-id="circle1">
	<button data-remodal-action="close" class="remodal-close"></button>
	<h1>Remodal</h1>
	<p>
	 	Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
	</p>
	<br>
	<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
	<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>


<div class="remodal" data-remodal-id="rect1">
	<button data-remodal-action="close" class="remodal-close"></button>
	<h1>Remodal</h1>
	<p>
		rect1
	</p>
	<br>
	<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
	<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

As a workaround, I added the following JavaScript (and also added the 'modaltrigger' class to the shapes):

$( document ).ready(function() {
	jQuery (".modaltrigger").each(function(){
		var id = $(this).attr('data-remodal-target');
		eval('window.' + id + ' = jQuery ("[data-remodal-id=" + id + "]").remodal();');
	});
});

jQuery (".modaltrigger").click(function(){
	var id = $(this).attr('data-remodal-target');
	eval('window.' + id + '.open();');
});

This simply initiates Remodal on the shapes and binds the click event, similar to what I expect Remodal already does but in a way that apparently works better on iOS.

If you use this workaround, you'll want to remove the 'remodal' class from your modal popups to avoid duplicate triggering.