仅在 iPhone 上拖动网站上的元素时的 WinXP 风格的拖动故障效果

Question

As the title specifies, my website presents a weird effect when I am dragging elements. This only happens on iPhone; on Desktop and Android browsers it does not happen .

This is how it looks like:

I can paste a snippet containing the code to drag the elements, but I do not think it will help. This seems more of a OS specific thing I am not aware of.

Does anyone know why this might happen?

---

EDIT:

As an answer requested it, here is the code for the drag (superfluous stuff has been cut out):

private dragStart(e: UIEvent): void {
    e.preventDefault();
    e.stopPropagation();

    this.dragInitial = Point.extractPagePointFromUiEvent(e);
    this.dragActual = this.dragInitial.clone();

    document.ontouchmove = (e1: TouchEvent) => this.elementDrag(e1);
    document.ontouchend = () => this.dragEnd();
}

private elementDrag(e: UIEvent) {
    const p = Point.extractPagePointFromUiEvent(e);

    const actualX = this.goalTile.offsetLeft - this.dragActual.x + p.x;
    const actualY = this.goalTile.offsetTop - this.dragActual.y + p.y;

    this.goalTile.style.left = actualX + "px";
    this.goalTile.style.top = actualY + "px";
    this.dragActual = p;
}

private dragEnd(): void {
    document.ontouchend = null;
    document.ontouchmove = null;

    if (this.dragInitial.equals(this.dragActual)) return;
    this.updateGoal();
}

Answer 1

A possible source of the problem is changing the style of element(s) within a event handler. You can try something like this:

private requestID: long;

private elementDrag(e: UIEvent) {
    const p = Point.extractPagePointFromUiEvent(e);

    const actualX = this.goalTile.offsetLeft - this.dragActual.x + p.x;
    const actualY = this.goalTile.offsetTop - this.dragActual.y + p.y;

    this.dragActual = p;

    if(this.requestID) cancelAnimationFrame(this.requestID);

    this.requestID = requestAnimationFrame(() => {
        this.requestID = null;
        this.goalTile.style.left = actualX + "px";
        this.goalTile.style.top = actualY + "px";
    });
}

Hope this helps.

Edit: I realized a problem of my solution: the event handler will probably be called at a rate much higher than the DOM refresh rate, so we need to clear previously requested animation not yet run.

Edit 2: Code adapted to question edit