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


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

Categorised as css, ios, javascript


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; = actualX + "px"; = actualY + "px";

Hope this helps.

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