Initial drag on elements in touch mode leads to scrolling of the complete webpage

[KilamMalik42]

When a draggable element is touched and moved for the first time, then the webpage also scrolls. Of course it happens only if the website can scroll, e.g. the page is larger than the visible area.

I can reproduce it with the code below in the ZIP in Chrome. On Desktop you just turn on the mobile emulator in the dev console. I have created a pretty high div so the webpage itself is higher than the visible area. Now click on the blue or red item and drag it vertically -> The page will also scroll. If you drop it and then drag the same item again, it will not scroll. But if you switch to the next item it will scroll again.

Is there anything I can do better in the code? This is just a small test, copied from some codepen, but I got the same problem in a real project which is too large to post here.

drag-raph.zip

[KilamMalik42]

I was able to solve it outside of Raphael. Not sure if this is the best solution or maybe it is possible to solve in Raphael directly.

The problem is, that the event from dragging is also passed to the webpage itself and processed there as scroll event. This can be avoided by using the css style touch-action:none. By setting this style to the SVG or the DIV above, everything works fine.

The only drawback is, that I can only set this attribute on the complete SVG, not on the elements itself like rect. Therefore when I click in the background and move my finger, the screen won't scroll anymore.

For me thats fine, but I leave this open to decide if there is a better solution.