Safari (OS X) does not throw pointer events when overflowing SVG content

Question

I need to capture pointer events clickalso mousemove clickon shapes that are outside the content field defined with <SVG>width / height rendered with overflow: visible.

In this example, circleproperly displayed, and the current Chrome, FireFox and IE11 record the events in a crowded part of the index, regardless of whether there is, for example padding. However, in Safari 10.0.1 OS X, pointer events are not logged, even when I use padding, borderand / or margin, regardless of which of the 8 possible permutations.

Safari only throws out a click if it is inside the content block <SVG>: https://jsfiddle.net/monfera/n1qgd5h4/5/

Is there a way to listen for pointer events that are in the overflow area? I have not tested yet whether Safari is incompatible (error) or other browsers do not work.

I can resort to a workaround for creating a larger element, <SVG>but this will invalidate the benefits of the block model and overflowCSS, which will lead to manual repetition in JS of what the browser should do.

Answer 1

This is still not fixed, more than 2 years later. Pretty disappointing.

:

svg {
   width: 1000px;
   height: 1000px;
   pointer-events: none;
   // don't use overflow here

   path {
      pointer-events: auto;
   }
}

<path> . , .