CODEWITHSUNDEEP
csssvgsafarioverflowpointer-events
Robert Monfera
Robert Monfera

Reputation: 2147

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

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.

Upvotes: 6

Views: 1655

Answers (1)

Fabian von Ellerts
Fabian von Ellerts

Reputation: 5211

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.

Upvotes: 0

Related Questions