JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>

<svg id="svg" width="100" height="100">
    <circle r="50" cx="50" cy="50" fill="blue" />
</svg>

<div id="overlay">click me; i pass mouse events through on every browser.  but the blue circle does not, on Safari 5.1 (and Chromium)</div>

CSS

#target {
 width:30em;
  height:20em;
   background-color:red; 
    position:absolute;
}
#svg {
    position:absolute;
    border:1px solid white;
}

#svg circle{
    pointer-events:none;
}

#overlay {
    border:1px solid white;
    background-color:yellow;
    width:15em;
    height:15em;
    top:4em;left:4em;
    position:absolute;
    pointer-events:none;
}

JavaScript

// demonstration of pointer-events:none. clicking on 
// any element in this demo should cause an alert to appear, because there is a click listener on the red background div, and the other two elements have pointer-events:none specified.  but in Safari, the SVG element does not allow mouse events through.


$(function() {
    
    
    $("#target").bind("click", function() {
        alert("Click!"); 
    }); 
        
    
});