Cdk Drag and drop events are interrupting the scroll on "ios 13" above devices(Even with cdkDragStartDelay of 200 miliseconds)

[hc-hemant]

I am trying to implement the cdk Drag and drop and it is working fine on desktop and android mobile devices as well. But some how the scroll is not working with the drag event in the "IOS 13" devices.

I have applied the [cdkDragStartDelay]="200" but still the scroll is not working(IOS 13) .

We are using Angular/cdk : '8.1.2'. with Angular/core : '8.0.0'.

This seems to be an issue with "IOS 13" compatibility with cdk. Because it is working on other ios versions.

Environment

• Angular: 8.0.0
• CDK/Material: 8.1.2
• Browser(s): safari
• Operating System (e.g. Windows, macOS, Ubuntu): IOS 13

[crisbeto]

What iOS 13 device is this on? I think that iPad is treated like a desktop browser, whereas iPhone is still considered a mobile one.

[hc-hemant]

I have checked it on all mobile devices.

First i tried it on Iphone 6s plus which had IOS 13.1.2 and then just to be sure i checked it on Iphone XR, which has IOS 13.3, but the scroll bar was not working. but When i tried it on previous version of IOS like 10 or so. on other device (Iphone was 6s) it was working seamlessly.

So somehow the scroll is not working on the IOS 13+ devices i guess.

[Achilles1515]

@crisbeto I can confirm this bug on my iPhone 8, iOS 13.3.

1. Go to the official CDK drag and drop examples site and scroll down to the "delayed dragging" example.
2. Tap on the box and then immediately attempt to scroll --> nothing happens. No scroll, no drag.

[Achilles1515]

@crisbeto Please see below videos.
https://imgur.com/i7rGGr2
(left is iOS 9 and right is iOS 13)

https://imgur.com/xq6fwM4

Also as shown in the videos, the delayed dragging demo should have the 'user-select: none' CSS style added to avoid the text-selecting fiasco.

[naeimsf]

Hey, did you find any solution?

[frakay100]

Did anyone find a solution or a work around to this issue? Also seeing this issue on Ipad Air 2 13.3.1 @angular/cdk 9.2.1 - Scrolling is disabled and have not been able to work around this. Tested on Android, Mac OSX, Windows all works fine.

[naeimsf]

@frakay100
A temporary workaround can be mapping toucheevents to mouseevents.

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type="mousemove"; break;        
        case "touchend":   type="mouseup"; break;
        default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);
    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
} 

[teamwellbeang]

We are also facing this issue on iOS.