Notice: This question is only about plain Javascript and HTML.

I've tried the usual method to move HTML elements around with the mouse inside a mousemove event function like so:

element.style.left = e.clientX - offset.x + 'px';
element.style.top  = e.clientY - offset.y + 'px';

Earlier I had captured the x-y offset inside an element.mousedown function and zeroed it in a document mouseup function.

The problem is that the HTML element always follows the mouse loosely, like it is attached via a rubber band. This happens because Javascript updates the HTML element's position at least one or more frames later, which is annoying, and looks sloppy and poorly made.

To see this effect drag the object quickly horizontally from one edge of the screen to another on this codepen (that comes from another question). Then try moving a window on your PC to see the huge difference.

https://codepen.io/kosarh79/pen/wqXGdE

This is only one example, I've seen several, and all have the same problem. I've noticed that this issue is getting worse when there is a heavier element, like a form, since it takes more time to draw.

UPDATE: Here is a screen capture of the issue -it is amplified quite a bit due to simultaneous recording, but you get the picture: