getBoundingClientRect deviation between page loads, alternative?

I'm trying to make an animated category navigation panel and I want the highlighted background to move to the selected category: https://gyazo.com/78119b65275f1905bdb8f5ff03ea4746

To do so, I dynamically use getBoundingClientRect to obtain the proper positions of where the block should go. Although between page loads, the values sometimes randomly are offset for no reason and look like this: https://gyazo.com/798be154e3817261bd8f0aa3ec40ac2d

My code is rather simple and I don't understand if there is a way to fix this or if I have to find some other way that avoids getBoundingClientRect.

const projectCategories = document.getElementById("project-categories");
const selector = document.getElementById("category-selector");
const offset = projectCategories.getBoundingClientRect();
const offsetX = offset.left;
console.log(offsetX);
const offsetY = offset.top;
function moveSelector(selector, left, width, height, offsetX, offsetY) {
    selector.style.width = width + "px";
    selector.style.height = height + "px";
    selector.style.transform = "translateX(" + (left - offsetX) + "px)";
}
const initialCategory = document.getElementById("project-categories").getElementsByClassName("active")[0];
const meta = initialCategory.getBoundingClientRect();
const top = meta.top;
moveSelector(selector, meta.left, meta.width, meta.height, offsetX, offsetY);
selector.style.top = (top - offsetY) + "px";
projectCategories.addEventListener("click", (e) => {
    const target = e.target;
    if (target.nodeName === "A") {
        const meta = target.getBoundingClientRect();
        const height = meta.height;
        const width = meta.width;
        const left = meta.left;
        projectCategories.getElementsByClassName("active")[0].classList.remove("active");
        target.classList.add("active");
        moveSelector(selector, left, width, height, offsetX, offsetY);
    }
});