Safari does not throw pointer events when overflowing SVG content

Question

I am trying to add click events to an SVG element that has a visible overflow and a shape element (circle / path) inside it that overflows the SVG.

In Safari (9,10,11), the click event does not work in the area where the form element (circle / path) overflows while it works fine in the area present in the SVG.

var count = 0;

function clickMe() {
  console.log("in click func");
  count++;
  document.getElementById("counter").innerHTML = count;
}

#counter {
  font-size: 2em;
}

#starSvg {
  pointer-events: auto;
  overflow: visible;
  position: absolute;
  left: 200px;
  top: 250px;
  border: 1px solid red;
}

#starPolygon {
  overflow: visible;
  fill: rgba(0, 153, 219, 1);
  pointer-events: visiblePainted;
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke: rgba(219, 0, 153, 1);
  cursor: pointer;
  shape-rendering: geometricPrecision
}

p {
  margin: 10px 0;
}

<div>
  <p>Open this webpage on Chrome &amp; safari</p>
  <p>On Chrome: Click work on all four hands of the star.</p>
  <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>

  <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
    <span id="counter">0</span>
  </p>
  <div class="containter">
    <svg onclick="clickMe()" id="starSvg" width="100%" height="100%">
          <g width="100%" height="100%" transform="" style="overflow: visible; transform: rotate(45deg) translate(0, 0);">
            <polygon id="starPolygon" shape-rendering="geometricPrecision" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
          </g>
        </svg>
  </div>
</div>

Run codeHide result

Is this also a bug in Safari? The click event works fine in all browsers, including IE.

Answer 1

This reflects the Webkit # 140723 error report here: https://bugs.webkit.org/show_bug.cgi?id=140723

, , : https://codepen.io/anon/pen/pvPQqY

, , :

https://codepen.io/anon/pen/YeOmGW

===========

: , (svg), . .

, , IAW, : http://w3.org/TR/SVG11/masking.html#AutoClipAtViewportNotViewBox, ( ) : http://w3.org/TR/SVG11/masking.html#OverflowAndClipProperties Safari;

, OP () , .

HTML, . ( , )

, .

var count = 0;
document.querySelector('svg').addEventListener('click',clickMe);

function clickMe(e) {
  console.log("clicked on: " + e.target.id);
  count++;
  document.getElementById("counter").innerHTML = count;
}

#counter {
  font-size: 2em;
}

#starSvg {
  pointer-events: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
}

#starPolygon {
  transform: translate(50%, 50%) rotate(45deg);
  fill: rgba(0, 153, 219, 1);
  stroke-width: 4;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke: rgba(219, 0, 153, 1);
  cursor: pointer;
  shape-rendering: geometricPrecision
}
#starClip {
  width: 100%;
  height: 100%;
  stroke-width: 1;
  stroke: red;
  fill: transparent;
}

p {
  margin: 10px 0;
}

<div>
  <p>Open this webpage on Chrome &amp; safari</p>
  <p>On Chrome: Click work on all four hands of the star.</p>
  <p>On Safari: Click works only on the hands inside the red area(SVG bounding Rect).</p>

  <p style="position: absolute; top: 100px; left: 200px;">Click Event Counter:
    <span id="counter">0</span>
  </p>
  <div class="containter">
    <svg id="starSvg">
          <rect id="starClip" x="50%" y="50%"></rect>
          <g>
            <polygon id="starPolygon" x="0" y="0" points="0 -90,15 -15,90 0,15 15,0 90,-15 15,-90 0,-15 -15"></polygon>
          </g>
        </svg>
  </div>
</div>

Hide result