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

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.

vodkabears / Remodal

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