Wheel event is not fired on any SVG element

[Jay Wang]

I am trying to bind a wheel event listener to a SVG group element with D3. It seems the wheel event is not triggered when I scroll on the group element in Safari (the group is not empty). It works fine on Firefox or Chrome.

For a demo, see this codepen (https://codepen.io/xiaohk/pen/oNZdwoO).

Interestingly, it works as expected if the wheel event listener is bound to the SVG element instead of one <g> element.

For example, see this codepen (https://codepen.io/xiaohk/pen/vYxjZdY)

[Jay Wang]

Here is a related question on stack overflow (https://stackoverflow.com/questions/67836886/wheel-event-is-not-fired-on-a-svg-group-element-in-safari)

[Said Abou-Hallawa]

This is actually applied to <rect> element as well which suggests the bug is applied to all SVG elements.

[Said Abou-Hallawa]

Created attachment 430775 [details]
reduced test case

This test case shows the bug can happen with the SVG <rect> element.

[Victor Ananiev]

I found that binding first a wheel event to a containing HTML element (like 'SVG' or document.body) makes this working.
See my comment on stack overflow (https://stackoverflow.com/questions/67836886/wheel-event-is-not-fired-on-a-svg-group-element-in-safari).

[Radar WebKit Bug Importer]

<rdar://problem/79240222>

[Simon Fraser (smfr)]

This is because we don't build event regions inside SVG content.