How To Position A Fixed-location Element On Ios Browser When Zoomed?

I have a nice little React drag-drop library that works for mouse- and touch systems. For touch, it grabs the touch location via clientX and clientY (e.targetTouches[0].clientX, e.

Solution 1:

Stick an element at 0,0, position:fixed.

Get its x/y offset from the browser window using getBoundingClientRect().

Then delete the element.

functiongetFixedOffset() {
    let fixedElem = document.createElement('div');
    fixedElem.style.cssText = 'position:fixed; top: 0; left: 0';
    document.body.appendChild(fixedElem);
    const rect = fixedElem.getBoundingClientRect();
    document.body.removeChild(fixedElem);
    return [rect.left, rect.top]
}

This works (yay!) but feels pretty kludgey, creating and then destroying a DOM element every time the user drags-and-drops. Other suggestions are welcome.