Brush doesn’t prevent scrolling on touch devices. about d3-brush

[mbostock]

Possibly we need touch-action: none, too.

[mbostock]

The only thing that we’re missing here is that we’re calling nopropagation on touchstart rather than noevent, and that’s due to d3/d3-drag#9. But as long as the user isn’t trying to support clicking and brushing simultaneously, it should be safe to noevent on touchstart and thus prevent scrolling. Brushing is essentially unusable on touch devices now, so I think we must start there.

[mbostock]

as long as the user isn’t trying to support clicking and brushing simultaneously

It seems like that works, though. You can listen to click events as long as the click gesture didn’t have any effect on the brush (e.g., clicking on the background when the brush is empty, or clicking on the brush but not moving during click).

That means we might want to take the more conservative route and only preventDefault on mousedown for touch devices.

[mbostock]

I must be missing something here: d3-drag also does not preventDefault on touchstart or mousedown, but it works on iOS.

[mbostock]

I’ve isolated the issue: it’s because for d3-brush, the touchmove listener isn’t registered until touchstart, whereas for d3-drag and d3-zoom, the touchmove listener is registered once ahead of time. 🤦‍♂

https://observablehq.com/d/e3dc7fb1297975f8

[mbostock]

Some history, since I was curious. d3.brush previously registered the touch listeners statically; they were switched to transient listeners in d3/d3@6ef0eda. Prior to that, d3.brush registered listeners statically on the window! That was removed in d3/d3@ec12de6. d3.drag adopted static touch listeners in d3/d3-drag@9496742. d3.zoom appears to have always used static touch listeners since the first commit, d3/d3@2d98bf1.

[yaahor]

It works properly if brush is applied to the <svg> element, but <g> element.