D3.js zoom is not working with mousewheel in safari

Question

I'm using D3 v4 to achieve the zoom functionality and everything works perfectly on FireFox, Chrome browsers.

Quite different behavior with Safari browser (my version is Version 10.0.1 (12602.2.14.0.7)). Wheel zoom works for g element and doesn't work for svg element. Note: that dbClick zoom works for svg element.

I've created simple fiddle example where tried to reproduce the issue. If you try wheel zoom over red rect - it will work, outside of rect - not work, but works for other browsers.

I was looking for official examples like https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f where everything works and I could not find a problem with my example...

Here is a zones where zoom works (madness is that left and top zone in the svg has working zoom):

Answer 1

I got answer from mbostock:

PROBLEM:

As shown in the https://jsfiddle.net/vbabenko/5shshq97/7/ , this is a Safari bug (or if you like, an alternative interpretation of the specification). Safari does not dispatch wheel events to the SVG when there is no SVG content under the pointer; the events get sent to whatever is underneath the SVG element (the body in this case). In contrast other browsers dispatch wheel events to the SVG element anywhere inside its bounding rect.

SOLUTION:

If you want the SVG to receive the event on all browsers, you must put some content in the SVG to capture the wheel event. Here is a fixed test case: https://bl.ocks.org/mbostock/9e3fed7a5904991e7973a87628d9f84d

ORIGINAL DISCUSSION:

https://github.com/d3/d3/issues/3035