getBoundingClientRect Отклонение между загрузками страниц, альтернатива?

Question

Я пытаюсь создать анимированную панель навигации по категориям и хочу, чтобы выделенный фон переместился в выбранную категорию: https://gyazo.com/78119b65275f1905bdb8f5ff03ea4746

Для этого я динамически использую getBoundingClientRect для получения правильных позицийгде блок должен идти.Хотя между загрузками страниц значения иногда случайным образом смещаются без причины и выглядят так: https://gyazo.com/798be154e3817261bd8f0aa3ec40ac2d

Мой код довольно прост, и я не понимаю, есть ли способ исправить это или янужно найти какой-то другой способ, который избегает 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);
    }
});