Safari (OS X) doesn't emit pointer events on overflowing SVG contents

Question

I need to capture pointer events click and mousemove on shapes that are outside the contents box defined via <SVG> width/height, rendered via overflow: visible.

In this example, the circle is rendered properly, and current Chrome, FireFox and IE11 do capture pointer events on the overflowing part, whether or not there's e.g. padding. However, on Safari 10.0.1 OS X, pointer events are not registered, even when I use padding, border, and/or margin, no matter which ones of the possible 8 permutations.

Safari only emits click if it's inside the <SVG> contents block: https://jsfiddle.net/monfera/n1qgd5h4/5/

Is there a way of listening to pointer events that are in the overflow area? I haven't checked yet if Safari is non-compliant (bug) or the other browsers are lax.

I can resort to the workaround of making a larger <SVG> element but it would invalidate much of the benefit of the box model and the CSS overflow, leading to manually redoing in JS what the browser should do.

Putdown

Safari is non-compliant. – Helprin

Thank you @RobertLongson, I filed bug report 29307386 with Apple – Putdown

You may find the following polyfill useful. github.com/jquery/pep – Crystlecs

@RobertMonfera could you please provide a direct link to this bug report you submitted? The issue is being discussed here and it might be interesting to see webkit's response. (I couldn't find it in webkit's bugzilla) – Dialogize

@Dialogize I'm not sure if these things are public; url is bugreport.apple.com/web/?problemID=29307386 once logged in. Here's the main part, not much more info: Steps to Reproduce: Please follow #40587703 and the linked jsfiddle: jsfiddle.net/monfera/n1qgd5h4/5 Expected Results: It's expected that Safari registers mouse events on overflowing paint (or all); in this example, the padding, border or margin. Actual Results: No pointer event is registered by Safari. – Putdown

@RobertMonfera... "Don't have access" indeed. So did they respond? Is anyone working on it? If not, a better place would be bugs.webkit.org – Dialogize

@Dialogize no answer yet... I'll check that site, thanks! – Putdown

Answer 1

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

In case you need a quick fix:

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

   path {
      pointer-events: auto;
   }
}

<path> will then capture all mouse events. A little hacky, but it works in all modern browsers.

Chilblain