How to ensure consistent browser positioning measurements

I have a function that loops through a javascript array/object, adds some spans to the DOM, measures their positions and returns the measurements.

Example code below, but my question isn’t really about the code.

99% of the time these measurements are accurate, but not always. Sometimes the positioning will be significantly off.

Usually when they are off, running the function again will resolve it, but it has never happened to me, only other users and I am not sure what could be happening.

My only guesses are, maybe the user is resizing the browser window? Or doing something else that is affecting it? I am a bit at a loss.

So my question is, is there a standard way to prevent this sort of thing?

Could there be something I am missing? There are no animations or anything happening. Just placing the text and measuring.

To maybe lock down the browser so measurements cannot get disrupted? Or am I off track on that thinking?

EXAMPLE

HTML

<div style="position:absolute;width:400px;display:flex" id="measurecontainer"></div>

JAVASCRIPT

$( document ).ready(function() {


//example text
var tss = {};
tss[1] = {};
 Object.assign(tss[1], {word: 'Test One',id: 1});


tss[2] = {};
 Object.assign(tss[2], {word: 'Test Two',id:2});


tss[3] = {};
 Object.assign(tss[3], {word: 'Test Three',id: 3});




function measure_text(tss) {


var measurements = {};



var html = '';

for (const key in tss) {
  if (tss.hasOwnProperty(key)) {
    const item = tss[key];
     html += '<span style="margin:5px;padding:5px" id="'+item.id+'" class="measurethese" id="'+item.id+'">'+item.word+'</span>';
}
}


jQuery('#measurecontainer').html(html);


//measure each span
$('.measurethese').each(function(index, value) {

var elementid = jQuery(this).attr('id');

var innerelement = document.getElementById(elementid);
var positionInfo = innerelement.getBoundingClientRect();

var outerelement = document.getElementById('measurecontainer');
var outerpositionInfo = outerelement.getBoundingClientRect();

var positiontop = positionInfo.top - outerpositionInfo.top;
var positionleft = positionInfo.left - outerpositionInfo.left;

console.log('WORD ID '+elementid);
console.log('Position Top '+positiontop);
console.log('Position Left '+positionleft);

});


}



measure_text(tss);


});```