6

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.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
Robert Monfera
  • 1,980
  • 1
  • 22
  • 16
  • 2
    Safari is non-compliant. – Robert Longson Nov 16 '16 at 13:15
  • Thank you @RobertLongson, I filed bug report 29307386 with Apple – Robert Monfera Nov 22 '16 at 12:29
  • You may find the following polyfill useful. https://github.com/jquery/pep – Squiggs. Nov 23 '16 at 11:15
  • @RobertMonfera could you please provide a direct link to this bug report you submitted? The issue is being discussed [here](https://stackoverflow.com/questions/48566359/safari-doesnt-emit-pointer-events-on-overflowing-svg-contents) and it might be interesting to see webkit's response. (I couldn't find it in webkit's bugzilla) – Kaiido Feb 06 '18 at 06:45
  • @Kaiido I'm not sure if these things are public; url is https://bugreport.apple.com/web/?problemID=29307386 once logged in. Here's the main part, not much more info: Steps to Reproduce: Please follow http://stackoverflow.com/questions/40587203/safari-os-x-doesnt-emit-pointer-events-on-overflowing-svg-contents and the linked jsfiddle: https://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. – Robert Monfera Feb 06 '18 at 13:01
  • @RobertMonfera... "Don't have access" indeed. So did they respond? Is anyone working on it? If not, a better place would be https://bugs.webkit.org/ – Kaiido Feb 06 '18 at 13:08
  • @Kaiido no answer yet... I'll check that site, thanks! – Robert Monfera Feb 07 '18 at 18:22

1 Answers1

0

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.

Fabian von Ellerts
  • 4,763
  • 40
  • 35