WinXP-style drag-glitch effect when dragging elements on website on iPhone only

Published

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:

drag effect

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?

Source: Ios

Published
Categorised as css, ios, javascript

Answers

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


Greg Jaskolski

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq