D3 zoom not working with mousewheel in safari Version 10.0 (Mac)

This is the same issue that was created before #2626 but no one could reproduced and as result the ticket was closed. The issue is reproduced only in Safari (FireFox, Chrome works as expected). I’m using last version of D3 (4.2.2 and 4.4) The problem that D3 wheel zoom works only on g element and doesn’t work over svg element. Note dbClick zoom works over svg.

• Simple fiddle: https://jsfiddle.net/vbabenko/zq0v1rta/1/
• More details + illustration: http://stackoverflow.com/questions/40887193/d3-js-zoom-is-not-working-with-mousewheel-in-safari

Steps of reproduce (Safari):

1. Mouse over on red rect and start wheel zoom

zoom works

1. Mouse over on svg element near of red rect

zoom doesn’t work

Note: there is exists some zones in svg (left and top) where zoom works. This illustration described in stackoverflow link.

One of possible work around is to insert transparent rect with full width and heigh before our rect and zoom will work for Safari. For example: <svg> <rect></rect> --------> this is transparent rect with full width and height <g> <rect></rect> --------> this is our red rect </g> </svg>

If someone can explain this behavior in Safari and especially explain ‘magic’ zones it would be great.

[mbostock]

1. As stated in the ISSUE TEMPLATE you saw when you filed this issue, please file issues in the appropriate repository (in this case d3-zoom) not here.

2. To make debugging easier, I ported the JSFiddle test case to bl.ocks.org: https://bl.ocks.org/mbostock/91b75091873d06add0666f35c2e6afb4.

   I’ve also updated the Reporting an Issue instructions to explicitly discourage the use of sites such as JSFiddle since the boilerplate makes debugging more difficult.

3. As shown in the updated test case, 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.

   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

[karlcow]

See https://bugs.webkit.org/show_bug.cgi?id=226683